分區垂直對齊

Question

通過我對此也有許多問題就這一文章。 我想在頂部div元素中將內部div居中。 我能夠成功的唯一方法是使頂部div顯示為表格單元格，但是當我這樣做時，頂部div將不再是一個塊並且不會占用屏幕的整個寬度。

除了使用頁邊距之外，還有什么其他方法可以將它放在div中。

<div class="top">
    <div class="inside">
        <input type="text"></input>
    </div>
</div>



.top{
    height:40px;
    border:1px solid #000000;
    width:auto;
}

.inside{
    display:inline-block;
    vertical-align:middle;
}

.inside input{
    display:block;
}

jsfiddle

Answer 1

您可以使用以下替代方法：

.top:before {
  content:" ";
  display:inline-block;
  height:100%;
  vertical-align:middle;
}

演示http://jsfiddle.net/8X4Ps/3/

---

這個如何運作？

使用偽選擇器：之前，您可以生成內容元素並像對待其他標簽一樣處理每個屬性。

在這種情況下，因為我們有一個帶display:inline-block的元素，那么為什么不通過屬性vertical-align它垂直居中？

我們這里有一個小問題，因為這僅與其他inline元素有關。 在這里:before可以幫助我們的地方，我們需要的是一個內聯元素，該元素占據容器100% height ，然后可以基於該元素與中間對齊。

Answer 2

將.top設置為display:table將其寬度設置為width:100% ，並將.inside設置為display:table-cell

小提琴

Answer 3

也許您可以使用填充？

.inside
{
display:inline-block;
vertical-align:middle;
width:100%;
padding-top:1em;
padding-left:25%;
padding-bottom:1em;
padding-right:25%;
}

.inside input{
display:block;
width:50%;
}

http://jsfiddle.net/aronez/8X4Ps/8/

工作正常

打招呼