html – 将输入框放在div的中心

前端之家收集整理的这篇文章主要介绍了html – 将输入框放在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>

希望这可以是有帮助的。谢谢你。

猜你在找的HTML相关文章