垂直對齊浮動Div內的文本

我有一個div在另一個div容器內浮動。在正確的浮動div內，我正在顯示文本（日期/時間）。如何在不使用頂部填充的情況下垂直對齊文本？當我使用頂部填充時，它會移動我的div，然後它不再位於容器中心。謝謝！垂直對齊浮動Div內的文本

來源

2012-01-12 Ibanez

如果你能請張貼的示例代碼。查看容器的css也是有用的。如果容器的高度已知或未知，並且包含的div的高度已知或未知，則將決定採取哪種方法來解決您的問題。 – BumbleB2na 2012-01-12 18:34:59

嘗試指定一個行高（如果它只是一行文本）。或者我認爲要做一些像'display：table-cell'或類似的工作，但不知道它是否完全跨瀏覽器（和舊瀏覽器）兼容 – Rodolfo 2012-01-12 18:35:40

我會說使用vertical-align：top但沒有看到什麼你這樣做可能不是正確的答案。 – j08691 2012-01-12 18:36:00

在你的CSS嘗試使用你的容器上的行高。在行高中使用與容器高度相同的值。這應該垂直對齊你的文字。

如果DIV是height:50px;不是增加line-height:50px;

來源

2012-01-12 19:29:48 einar

我想這是解決問題的一種方法。如果我的div高度是90px，並且我有兩行文本，那麼將行高設置爲45px會使每行分別減少25％和75％。如果我不希望這兩行文字傳播得很遠，會怎麼樣？謝謝！ – Ibanez 2012-01-12 20:27:54

這是真的，那可能是一個問題 – einar 2012-01-13 01:42:14

'width：50px'應該是'height：50px'，對嗎？ – 2012-02-14 09:00:31

這裏是一個例子，它在右側添加浮動DIV，並垂直和水平地居中放置文本。

http://jsfiddle.net/johnpapa/pUr6T/

這裏的關鍵是要設置元素的行高是其容器的整個高度。

<div id="outerDiv"> 
    <div id="rightFloatingDiv"> 
     <p>Hello</p> 
    </div> 
    <p>Lorem ipsum dumsome Lorem ipsum dumsome Lorem ipsum </p> 
</div> 

#outerDiv{ 
    width:400px; 
    height:400px; 
    background:#EEAAEE; 
} 
#rightFloatingDiv{ 
    width:100px; 
    height:100px; 
    line-height:100px; 
    background:#EEEEEE; 
    float:right; 
} 
#rightFloatingDiv > p{ 
    width: 100%; 
    height: 100%; 
    line-height:inherit; 
    background:yellow; 
    vertical-align:middle; 
    text-align:center; 
}

來源

2012-01-12 19:03:41

垂直對齊浮動Div內的文本

回答

相關問題