文本不能正常工作的垂直中间对齐方式

我想垂直居中对齐具有百分比高度的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