Question

我喜欢这个里面有文字的小盒子，但是它被卡在了顶部，我试过使用Vertical Align它没有帮助，这里是代码：

.Letters
{
font-size:24px;
color: white;
font-family:Futura, Arial, San-serif;
height:40px;
width: 40px;
margin:2px;
position:relative;
top:5px;
background-color:#3594F0;
text-align: center;
float: left;
display: inline; 
vertical-align:middle;
}

jsfiddle链接： http://jsfiddle.net/2Hq3s/

我需要文本处于绝对中间而不扩大文本。

Answer 1

添加到.Letters

line-height:40px;       /* Same value as your 'height' */
vertical-align:middle;

DEMO

Answer 2

使用display：table，table-cell，如下所示：http://jsfiddle.net/maximgladkov/MALAj/

<强> HTML

<p class="Letters">
    <span>aasdfasd<br/>asdfasdfasdf</span>
</p>

<强> CSS

.Letters
{
    font-size:24px;
    color: white;
    font-family:Futura, Arial, San-serif;
    height:400px;
    width: 400px;
    margin:2px;
    position:relative;
    top:5px;
    background-color:#3594F0;
    text-align: center;
    float: left;
    display: table;
}

.Letters span {
    display: table-cell;
    vertical-align: middle;
}

Answer 3

使用绝对定位

top:50%;
bottom:50%;
position:absolute;

http://jsfiddle.net/2Hq3s/3/

Answer 4

在父级上使用display：table-cell来使用vertical align属性这是 fiddle

<div class="parent">
    <p class="Letters">a</p>
</div>

.parent{
    background-color:#3594F0;
    display:table-cell;
}

如何让css中的文本出现在垂直中间

4 个答案: