중앙 경간이 수직

Question

내가 이런 걸 가지고 : 당신이 여기에서 볼 수 있듯이, 내 의도는 문단 내부의 범위를 중심으로하는 것입니다,

<p style="text-align:center;background-color:yellow;"><span style="vertical-align:middle;">My text goes here...</span></p> 

분명히을 (수평 및 수직). 텍스트는 수평으로 잘 정렬되어 있지만 수직 중심 맞춤이 작동하지 않는 이유는 무엇입니까? 여기 뭐가 잘못 됐니?

는 span에 p에 display:table; 및 display:table-cell;를 사용하여 당신에게

Answer 1

http://jsfiddle.net/gxArp/

감사드립니다.

p{ 
    text-align:center; 
    background-color:yellow; 
    height:50px; 
    width:100%; 
    display:table; 
} 
span{ 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 2

수직 정렬은 내용을 인라인으로 정렬합니다. HTML 속성 인 valign = "middle"에 해당하는 CSS가 아닙니다. 이는 parent/child를 참조하지 않고, 직전의 요소와 비교하여 세로로 정렬된다는 것을 의미합니다. 즉,이 속성은 줄 또는 td 요소 내부에서 텍스트를 정렬 할 수 있습니다. 세로 센터링을 달성하는 방법에 대한 링크 http://phrogz.net/css/vertical-align/index.html을 확인하십시오.

희망이 도움이됩니다.