#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;
}
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>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/
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.
#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.
Source: Stackoverflow.com