엘리먼트 내부의 텍스트를 백분율로 수직 정렬 하시겠습니까?

Question

높이가 백분율 인 요소가 있기 때문에 줄 높이 해킹을 사용할 수 없습니다. 누구든지이 문제를 해결하는 방법에 대한 아이디어가 있습니까?

<div height="100%"> 
    I want to be vertically aligned in the middle 
</div> 

Answer 1

여기 당신이 원하는 무엇 : http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html

Answer 2

당신은 DIV의 높이 값, 다음 설정 라인 높이를 설정해야합니다 : value_of_div_height합니다. line-height 100 %는 div 요소가 아닌 텍스트의 가치를 취하기 때문에 작동하지 않습니다. 그것은 한 높이 = 줄 높이로, 또는 수직 정렬없이 작동

div { 
    height: 200px; 
    line-height: 200px; 
    display: block; 
} 

대체 방법 당신은 div 요소 내부 단락으로 수행하려는 경우 : http://www.w3.org/Style/Examples/007/center

DIV.container { 
    min-height: 10em; 
    display: table-cell; 
    vertical-align: middle } 
... 
<DIV class="container"> 
    <P>This small paragraph... 
</DIV> 

Answer 3

를 설정하면 글꼴 크기, 그리고 텍스트 줄 수를 알 수 있습니다. 스팬에 텍스트를 래핑 할 수 있습니다. 스팬에서 다음 CSS를 사용하십시오.

span { 
    font-size:20px; 
    margin-top:-10px; //half the font-size (or (font-size*number of lines)/2) 
    position: relative; 
    top: 50%; 
}