Place input box at the center of div
HtmlCssHtml Problem Overview
I have a div, and I want the input box to be place at it's center. How can I do this?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
You can just use either of the following approaches:
.center-block {
margin: auto;
display: block;
}
<div>
<input class="center-block">
</div>
.parent {
display: grid;
place-items: center;
}
<div class="parent">
<input>
</div>
Solution 3 - Html
#the_div input {
margin: 0 auto;
}
I'm not sure if this works in good ol' IE6, so you might have to do this instead.
/* IE 6 (probably) */
#the_div {
text-align: center;
}
Solution 4 - Html
#input_box {
margin: 0 auto;
text-align: left;
}
#div {
text-align: center;
}
<div id="div">
<label for="input_box">Input: </label><input type="text" id="input_box" name="input_box" />
</div>
or you could do it using padding, but this is not that great of an idea.
Solution 5 - Html
Here's a rather unconventional way of doing it:
#inputcontainer
{
display:table-cell; //display like a <td> to make the vertical-align work
text-align:center; //centre the input horizontally
vertical-align:middle; //centre the input vertically
width:200px; //widen the div for demo purposes
height:200px; //make the div taller for demo purposes
background:green; //change the background of the div for demo purposes
}
It might not be the best way to do it, and margin won't work, but it does the job. If you need to use margin, then you could wrap the div that displays as a table cell in another 'normal' div.
JSFiddle: http://jsfiddle.net/qw4QW/