Question

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

这不起作用。请帮忙。

Answer 1

如果使用带有一行的文本，则可以将父div显示用作table和子div显示为table-cell或其他方法，然后使用line-height属性。

带有表格单元格显示的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;
}

行高See fiddle

的Css

Answer 2

尝试在div上添加line-height，等于该div的实际高度。

所以，如果你有

<div class = "foo"><span>Blah</span></div>

你的风格应该是

.foo {height:5em; line-height:5em;} span {font-size:1em;}

Further explanation and other examples if you want it.

文本的垂直中间对齐不起作用

2 个答案: