gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 11:41:36 27 4
gpt4 key购买 nike

我有一个 div,我希望输入框位于它的中心。我该怎么做?

最佳答案

要注意的是输入元素是内联的。 在将其定位到中心之前,我们必须使其成为 block 状 (display:block) : 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>

但是如果你有一个 positioned = absolute 的 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 - 将输入框放在div的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1281403/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com