固定高度div中的中心文本

我想將某些文本居中在固定高度div中。固定高度div中的中心文本

我做了以下fiddle

<div style="height:180px;border:1px solid black;vertical-align:middle;"> 
    <h1 style="vertical-align:middle;">Contact</h1> 
</div> 

<div style="height:180px;border:1px solid black;vertical-align:middle;"> 
    <h2>Welcome to the</h2> 
    <h1>AAA</h1> 
    <h4>system</h4> 
</div>

我已經試過了垂直對齊的各種選項：中間把它應用到不同的元素，但它似乎並沒有工作。

我也看到了其他問題，其中行高設置爲與字體大小相同的高度，但在第二個示例中，我在不同高度有多行文本。

有沒有很好的方法來做到這一點？

來源

2013-05-08 Daniel Powell

相似http://stackoverflow.com/questions/16244387/css-top-and-bottom-padding-split-evenly-within-fixed-height-border/16244775#16244775 – DannyB 2013-05-08 10:24:44

贊[this]（http： //jsfiddle.net/wzNp3/1/）？ – Vucko 2013-05-08 10:27:33

如果您在一條線上垂直居中嵌入元素，則線高等於高度技術非常棒。但是，您正在處理不同的佈局情況，您想要使用可變數量的線將塊垂直居中。在這種情況下，表格單元方法可能是最好的。但是請注意，表格單元在IE7中不受支持。 – 2013-05-08 10:50:43

垂直排列總是帶來一些麻煩。你應該只將這個CSS屬性應用於table（td）元素和內聯元素，而不是像div這樣的塊元素。

要定位中間的東西，您可以使用非常簡單的解決方案 - 通過使用絕對定位。

創建子塊並將其位置設置爲絕對，將其從頂部移動50％，並將margin-top設置爲負值，其值等於父級高度的一半。把你父母的位置設置爲親戚。

#parent { 
    position: relative; 
    height: 180px; 
} 

#child { 
    position: absolute; 
    top: 50%; 
    margin-top: -90px; 
} 

<div id="parent"> 
    <div id="child"> 
     <h1>sample</h1> 
     <h2>sample</h2> 
    </div> 
</div>

來源

2013-05-08 10:28:07 Kamil

用於displaytable-cell

像這樣

.parent{ 
    height:180px;border:1px solid black;vertical-align:middle; 
    display:table-cell; 
}

Demo

不要用途inline css在external css和寫一個類

來源

2013-05-08 10:30:07

謝謝，內聯的CSS只是爲了演示的目的 – 2013-05-08 11:00:48

該div也有一個左邊的浮動應用到它http://jsfiddle.net/wzNp3/8/這似乎在搞亂它，任何想法？ – 2013-05-08 11:28:13

比使用行高，如果在此框中的單行像這樣http://jsfiddle.net/rohitazad/wzNp3/11/ – 2013-05-08 11:37:16

固定高度div中的中心文本

回答

相關問題