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/

스팬을 사용하는 대신 마진이 0 인 DIV를 사용 하시겠습니까?

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;}