텍스트 가운데 세로 정렬이 작동하지 않습니다.

높이가 퍼센트 인 div의 텍스트를 가운데 정렬하고 싶습니다. 내가 사용하고있는 코드는 이것이다.텍스트 가운데 세로 정렬이 작동하지 않습니다.

CSS-

.div{ 
    position: fixed; 
    left: 0px; 
    border-radius: 10px; 
    height: 6%; 
    width: 20%; 
    transform: translate(-10px,0px); 
    -ms-transform: translate(-10px,0px); 
    -webkit-transform: translate(-10px,0px); 
    -o-transform: translate(-10px,0px); 
    -moz-transform: translate(-10px,0px); 
    z-index: 10 
} 
.div span { 
    text-align: center; 
    font: 20px/100% Arial, Helvetica, sans-serif; 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    vertical-align: middle; 
}

, HTML

<div class="div"><span>This is some text.</span></div>

이 밤은 작동. 도와주세요.

출처

2012-12-29 sdnr1

당신은 테이블과 자식 DIV로 부모 DIV 디스플레이를 사용할 수 있습니다처럼 당신의 스타일이 보일 것입니다 테이블 - 셀 또는 다른 접근 방식을 사용하면 한 줄의 텍스트를 사용하고 line-height 속성을 사용합니다. 테이블 셀 표시 줄 높이 See fiddle

.div{ 
position: fixed; 
left: 0px; 
border: 1px solid black; 
border-radius: 10px; 
height: 50%; 
width: 20%; 
z-index: 100; 
display: table; 
} 
.div span { 
text-align: center; 
font: 20px/100% Arial, Helvetica, sans-serif; 
text-decoration: none; 
color: black; 
display: block; 
vertical-align: middle; 
display: table-cell; 
}

CSS로

CSS는 See fiddle

출처

2012-12-29 07:18:21 Dineshkani

아주 많이이 나를 위해 일한 주셔서 감사합니다! – sdnr1