kta*_*kta 52
问题是输入元素是内联的.在将它定位到中心之前我们必须阻止它(显示:块):margin:0 auto.请参阅以下代码:
<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>
Run Code Online (Sandbox Code Playgroud)
但是如果你有一个定位=绝对的div,那么我们需要做的事情有点不同.现在看到这个!
<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>
Run Code Online (Sandbox Code Playgroud)
希望这会有所帮助.谢谢.
Aug*_*aas 15
#the_div input {
margin: 0 auto;
}
Run Code Online (Sandbox Code Playgroud)
我不确定这是否适用于'IE6',所以你可能不得不这样做.
/* IE 6 (probably) */
#the_div {
text-align: center;
}
Run Code Online (Sandbox Code Playgroud)
您可以在输入字段中使用以下CSS:
.center-block {
margin: auto;
display: block;
}
Run Code Online (Sandbox Code Playgroud)
现在在html中
<div>
<input class="center-block">
</div>
Run Code Online (Sandbox Code Playgroud)