Question

假设我有这段代码

<div id="content1" width="400px" height="100px">
<input type="text" id="znamkyInput">
</div>

<div id="content2" width="400px" height="100px">
<input type="text" id="znamkyInput">
</div>

我希望输入垂直居中进入div的中心。我怎么能这样做？

Answer 1

试试吧。并查看demo

 #content1 {
    text-align: center;
    }

Answer 2

对子元素使用display：inline-block，并在父元素上使用text-align：center。那应该是诀窍

<div id="content1" style="text-align:center" width="400px" height="100px">
    <input type="text" style="display:inline-block" id="znamkyInput">
</div>

Answer 3

试试以下内容，

 <div id="content1" width="400px" height="100px">
    <input type="text" style="display:inherit" id="znamkyInput">
 </div>

Answer 4

原始html不正确，div的高度和宽度应以css（或使用style属性）提供。

垂直和水平对齐中心：

#content1 {
    width: 400px;
    height: 100px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

由于这些div中有两个紧挨着彼此，因此table-cell将使它们在同一条线上彼此相邻。我要将每个包装在另一个div中（不是一个很好的解决方案），或者在它们之间放置一个br标签（或其他一些内容）。

如果打算让几个div紧挨着下面和下面，那么我会考虑使用一个表格。

Answer 5

试试这个：

HTML：

<div id="content1">
  <div>
      <input type="text" id="znamkyInput"/>
  </div>
</div>

CSS：

#content1
{
    background-color: gray;
    width:400px;
    heigth:100px;
}
#content1 div
{
    margin-left: auto;
    margin-right: auto;
   width: 158px; /*width of your input box*/
}

Working Example

将输入与div中心对齐

5 个答案: