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

发布时间：2020-12-14 21:50:12 所属栏目：资源来源：网络整理

导读：我有一个div，我想要输入框放在它的中心。我该怎么做？解决方法捕获的是输入元素是内联的。在将其定位到中心之前，我们必须阻止(显示：块)：margin：0 auto。请看下面的代码： htmlhead style div.wrapper { width: 300px; height:300px; border:1px soli

我有一个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>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!