文本DIV中應始終對準中間

Question

我試過的東西，但垂直對齊不起作用。

HTML：

<div class="browseBuildsArea-pro"> 
    <img class="champion" src="http://wiki.guildwars.com/images/d/d3/60px-Ranger-tango-icon-200.png"> 
    <div class="build-poster"> 
     <span class="middle-text"> 
      aaaaaaaaaaaa<br> 
      bbbbbbbbbbbb<br> 
      ccccccccccccc<br> 
      dddddddddddd<br> 
     </span> 
    </div> 
</div> 

CSS：

div.browseBuildsArea-pro { 
    float: left; 
    position: relative; 
    width: 790px; 
    height: 90px; 
    background-image:url('http://revistaverzus.com/online/background.jpg'); 
    background-repeat:no-repeat; 
} 
div.browseBuildsArea-pro img.champion { 
    float: left; 
    display: block; 
    height: 72px; 
    margin-left: 14px; 
    margin-top: 7px; 
    border-radius: 9px; 
    -moz-border-radius: 9px; 
    -khtml-border-radius: 9px; 
    -webkit-border-radius: 9px; 
} 
div.browseBuildsArea-pro div.build-poster { 
    display: block; 
    position: relative; 
    margin-left: 150px; 
    margin-top: 10px; 
} 
span.middle-text { 
    vertical-align: middle; 
} 

http://jsfiddle.net/sCWfS/1/

我怎樣才能讓無論內容長度的文本對齊中間？

Answer 1

你試過這個嗎？ http://jsfiddle.net/sCWfS/2/

而不是跨度使用帶邊距的DIV：0 auto？

div.middle-text { 
    margin: 0 auto; 
} 

Answer 2

嘗試使用下面的CSS：

div { 
    text-align: center; 
} 

Answer 3

垂直對齊的CSS屬性不爲div的工作。 看看這個答案：
Vertical alignment of elements in a div

Answer 4

您需要使用display: table父和display: table-cell對孩子的垂直對齊的工作。

這裏有一個工作示例：http://jsfiddle.net/sCWfS/3/

Answer 5

div.browseBuildsArea-pro div.build-poster { 
display: block; 
position: relative; 
    text-align: center;}