0

我想在具有百分比高度的 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>

这不起作用。请帮忙。

4

2 回答 2

1

如果您使用带有一行的文本然后使用 line-height 属性，则可以将父 div 显示为表格，将子 div 显示为表格单元格或另一种方法。

带有表格单元格显示的 Css参见小提琴

.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 with line-height See fiddle

于 2012-12-29T07:18:21.533 回答
0

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

所以如果你有

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

你的风格应该看起来像

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

如果需要，请提供进一步的解释和其他示例。

于 2012-12-29T07:17:45.020 回答