将输入框放在div的中心

use*_*073 36 html css

我有一个div,我希望输入框放在它的中心.我怎样才能做到这一点?

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)

希望这会有所帮助.谢谢.

  • “问题在于输入元素是内联的”——这是关键!谢谢 (3认同)

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)


Aya*_*yan 9

您可以在输入字段中使用以下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)