在div元素中垂直對齊文本

我知道這個問題已被要求死亡，但沒有通過搜索已爲我工作。在div元素中垂直對齊文本

你知道這筆交易，我有一個div元素，我需要垂直對齊文本，但沒有任何工作（position：absolute; top：50％; margin-top：-x; display：table-cell; vertical -align：middle; etc。等）

這是我正在使用的（對於內聯CSS，感到抱歉）。無論如何，我會使用行高，但文本可以是一行或兩行。它應該垂直對齊圖像，總是最大高度30px（30x50）。

<div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;"> 
<div style="float:left;width:55px;height:40px;"> 
<a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a> 
</div> 
<div style="float:right;width:155px;font-size:0.7em;height:40px;"> 
<a href="link">This is the text to vertically align</a> 
</div> 
</div>

來源

2011-07-13 Tom

您必須使用內聯'CSS'嗎？使它很難回答... – Phil

根本沒有，我計劃將所有這一切轉換爲註冊CSS一旦我知道它 – Tom

的想法是從here，應該爲所有的瀏覽器。

<div style="margin: 0 0 10px 0; padding: 10px; border: 2px solid #606060; background-color: #2b2b2b; 
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;"> 
    <div style="float: left; width: 55px; height: 40px;"> 
     <a href="link"> 
      <img style="max-width: 50px; border: 1px solid #ffb92c;" src="image.jpg" 
       alt="" /></a> 
    </div> 
    <div style="float: right; width: 155px; font-size: 0.7em; height: 40px; display: table; #position: relative; overflow: hidden;"> 
     <div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;"> 
      <div style="#position: relative; #top: -50%;"> 
       <a href="link">This is the text to vertically align</a> 
      </div> 
     </div> 
    </div> 
    <div style="clear: both"></div> 
</div>

來源

2011-07-13 14:02:22

圖像和文字都沒有正確地垂直對齊 –

這很接近，但文字低於中心點。 – Tom

@Tom這是因爲您的html片段的其他邊距或填充。無論如何，如果您有一些動態大小的div，並且想要垂直對齊內容，則鏈接將提供唯一的跨瀏覽器解決方案。其他的解決方案或者適用於靜態高度，或者只適用於某些瀏覽器，以及某些版本比bla bla ...更多 –

你需要做的是這樣的：

http://jsfiddle.net/rathoreahsan/5u9HY/

使用fixed height而不是padding在主要股利。和用於左右& Div的

來源

2011-07-13 13:58:33

線高度只會工作，如果它是一行文本，它可能是一個或兩個。 – Tom

使用白線高度好像其可固定有clearfix，或像我在下面的代碼段那樣，與包裝物的固定高度的公共浮問題。

我也坐在浮動divs的line-height，使它更寬一些。

看看這個：

<div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;height:40px"> <div style="float:left;width:55px;height:40px;"> <a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a> </div> <div style="float:right;width:185px;font-size:0.7em;height:40px;line-height:40px"> <a href="link">This is the text to vertically align</a> </div> </div>

http://jsfiddle.net/YqxPZ/3/

來源

2011-07-13 13:59:14

您的修復程序有一些錯誤。圖像和文字都不能正確對齊，甚至在一個div內。 –

謝謝，但如果文本足夠長，可以成爲兩行，這不起作用。 – Tom

你可以做的另一件事。如果是在div文字只有一行，您可以使用line-height

例如

div { 
    line-height:40px; 
}

來源

2011-07-13 14:04:47 brenjt

它可以是一兩行。 – Tom

下面是解

<div style="background: yellow"> 
<div style="width: 155px; font-size: 0.7em; height: 40px; display: table; overflow: hidden;"> 
    <div style="display: table-cell; vertical-align: middle;"> 
     <div style=""> 
      <a href="link">This is the text to vertically align</a> 
     </div> 
    </div> 
</div> 
<div style="clear: both"></div>

http://jsfiddle.net/5y4Nb/

來源

2013-03-28 00:14:47 Yock

更新小提琴：http://jsfiddle.net/5y4Nb/89/ –

的乾淨版本你是否需要只顯示幾行？ ong文本，這裏是Fiddle。根據需要調整高度。

.container-text { 
    height:40px; 
    width:180px; 
    overflow-y:hidden;  
    display:table-cell; 
    vertical-align:middle; 
    text-align: center; 
}

來源

2015-10-30 10:39:26 ihimv

在div元素中垂直對齊文本

回答

相關問題