将输入框放在div的中心

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


问题在于输入元素是内联的。 在将其定位到中心之前,我们必须先将其封锁(显示:块):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>

但是如果你有一个定位为绝对的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>

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


#the_div input {
  margin: 0 auto;
}

我不确定这是否适用于IE6,所以你可能不得不这样做。

/* IE 6 (probably) */
#the_div {
  text-align: center;
}

#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>

或者你可以使用填充来完成,但这不是一个好主意。

链接地址: http://www.djcxy.com/p/75741.html

上一篇: Place input box at the center of div

下一篇: Centering a div block without the width