Menu
How can i center the form called form_login horizontally and vertically in my page ?
Here is the HTML I'm using right now:
<body> <form id="form_login"> <p> <input type="text" id="username" placeholder="username" /> </p> <p> <input type="password" id="password" placeholder="password" /> </p> <p> <input type="text" id="server" placeholder="server" /> </p> <p> <button id="submitbutton" type="button">Se connecter</button> </p> </form> </body> I have tried to do the following css but my form is never centered :
#form_login { left: 50%; top: 50%; margin-left: -25%; position: absolute; margin-top: -25%; } 
987
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
align="center" attribute is now obsolete. You can use text-align attribute for this as following. This will center all the content inside the parent DIV. An optional way is to use margin: auto CSS attribute with predefined widths and heights.
Wrap your form element in a div tag. Add a class to the div html tag that will be used to center the form. Add the CSS flexbox to the class form-center. Test your form.
To center text in CSS, use the text-align property and define it with the value 'center. ' You can use this technique inside block elements, such as divs. You can also center text in HTML, which is useful if you only want to center individual elements on the page on a case-by-case basis.
you can use display:flex to do this : http://codepen.io/anon/pen/yCKuz
html,body { height:100%; width:100%; margin:0; } body { display:flex; } form { margin:auto;/* nice thing of auto margin if display:flex; it center both horizontal and vertical :) */ } or display:table http://codepen.io/anon/pen/LACnF/
body, html { width: 100%; height: 100%; margin: 0; padding: 0; display:table; } body { display:table-cell; vertical-align:middle; } form { display:table;/* shrinks to fit content */ margin:auto; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
