文本不能正常工作的垂直中間對齊方式

我想垂直居中對齊具有百分比高度的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顯示爲表格 - 單元格或其他方法，如果您使用一行文本然後使用行高度屬性。

的CSS與表格的單元格顯示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用於行高See fiddle

來源

2012-12-29 07:18:21 Dineshkani

非常感謝你這個工作對我來說！ – sdnr1