Menu
I have a div, and I want the input box to be place at it's center. How can I do this?
978
Center Align Text To just center the text inside an element, use text-align: center; This text is centered.
Use the CSS text-align Property to Center a Form in HTML We can set the value to center to center the form. For example, apply the text-align property to the form tag in the style attribute, and set the property to center . Next, create input tags with the type text and then submit .
The catch is that input elements are inline. We have to make it block (display:block) before positioning it to center : margin : 0 auto. Please see the code below :
<html> <head> <style> div.wrapper { width: 300px; height:300px; border:1px solid black; } input[type="text"] { display: block; margin : 0 auto; } </style> </head> <body> <div class='wrapper'> <input type='text' name='ok' value='ok'> </div> </body> </html> But if you have a div which is positioned = absolute then we need to do the things little bit differently.Now see this!
<html> <head> <style> div.wrapper { position: absolute; top : 200px; left: 300px; width: 300px; height:300px; border:1px solid black; } input[type="text"] { position: relative; display: block; margin : 0 auto; } </style> </head> <body> <div class='wrapper'> <input type='text' name='ok' value='ok'> </div> </body> </html> Hoping this can be helpful.Thank you.
109
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
