CSS垂直對齊不會做任何事情

我想在事業部和事業部的中間底部對齊文本。 CSS屬性 vertical-align：text-bottom;似乎什麼都不做？CSS垂直對齊不會做任何事情

我有3個div的，想居中DIV xrLabel1和其他分區xrLabel5把文本底部。

我已經包含了一些示例代碼。

感謝

<!DOCTYPE html> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="format.css"/> 
     <title></title> 
    </head> 
    <body> 
     <div class="TopMargin"> 
      <div class="xrLabel2">xrLabel2</div> 
      <div class="xrLabel1">xrLabel1</div> 
      <div class="xrLabel5">xrLabel5</div> 
     </div> 
    </body> 
</html>

CSS文件format.css

.TopMargin 
{ 
position:absolute; 
left:0px; 
top:0px; 
height:92px; 
width:650px; 
background-color:#808080; 
color:#000000; 
} 

.xrLabel2 
{ 
position:absolute; 
left:225px; 
top:17px; 
height:67px; 
width:99px; 
background-color:#FFFFFF; 
color:#000000; 
text-align:center; 
vertical-align:text-middle; 
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline; 
} 

.xrLabel1 
{ 
position:absolute; 
left:367px; 
top:8px; 
height:75px; 
width:99px; 
background-color:#FFFFFF; 
color:#000000; 
text-align:right; 
vertical-align:text-bottom; 
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline; 
} 

.xrLabel5 
{ 
position:absolute; 
left:75px; 
top:8px; 
height:75px; 
width:99px; 
background-color:#FFFFFF; 
color:#000000; 
text-align:center; 
vertical-align:text-top; 
font-family:Times New Roman;font-size:9.75pt; 
}

來源

2013-12-20 user3122553

您需要使用display:table父元素，並display:table-cell; vertical-align:bottom;爲孩子。例如這裏：http://jsfiddle.net/hAScR/

來源

2013-12-20 11:51:52 n1kkou

中提到它感謝這個解決方案，它看起來像最好的。 – user3122553

塊元素不支持vertical-align這樣。您需要將display屬性設置爲table-cell。那麼你可以使用vertical-align。

http://jsfiddle.net/kuUHV/

來源

2013-12-20 11:14:14

-1

你可以在父元素上使用text-align:center。和子元素上的一個margin-top。

<div id="outer"> #text-align:center 
    <div class="inner">Radom text </div> # margin-top:__ 
</div>

Fiddle Demo :)

注：//請勿使用此爲響應式設計 - 當你調整窗口大小的元素將保持在同一地點，如果元素獲得小。

來源

2013-12-20 11:26:09

這並不總是放置元素在中間 - 它不與元素規模。 –

@F.Müller謝謝你指出。在備註 –

CSS垂直對齊不會做任何事情

回答

相關問題