在垂直中间对齐文本

Question

I have the following HTML/CSS code in which a line of text is shown in a green box with a dark green outline. 我有以下HTML / CSS代码，其中一行文本显示在带有深绿色轮廓的绿色框中。 Unfortunately, the text is shown closer to the top of the box. 不幸的是，文本显示在更靠近框的顶部。 I would like it to be in the vertical middle. 我希望它在垂直中间。 What do I need to change to get that effect? 为了达到这个效果，我需要改变什么？

Thanks, PaulH 谢谢，PaulH

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>   
    <style type="text/css">
    .foo
    {
        outline: 1px solid #98BF21;

        color: #333333;
        background-color: #EEFFCC;

        height: 27px;

        font-size: 15px;
        font-family: "Lucida Console","courier new";

        vertical-align: middle;

        margin: 1px 0px 0px;
        padding: 0px 5px;

        overflow: auto;
        display: inline-block;
    }
</style>
</head>
<body>
    <span class="foo">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
</body>
</html>

Answer 1

See here . 看到这里。

In your case, if your text is only one line, the method 2 works. 在您的情况下，如果您的文本只有一行，方法2工作。 Just replace height by line-height . 只需更换height由line-height 。

Answer 2

<div style="display:table-cell; vertical-align:middle;">
Stuff showing in the Vertical Middle of this Div
</div>

在垂直中间对齐文本

问题描述

2 个解决方案

解决方案1
2 已采纳 2011-03-03 15:43:30

解决方案2
0 2011-03-03 15:35:33

在垂直中间对齐文本

问题描述

2 个解决方案

解决方案1 2 已采纳 2011-03-03 15:43:30

解决方案2 0 2011-03-03 15:35:33

解决方案1
2 已采纳 2011-03-03 15:43:30

解决方案2
0 2011-03-03 15:35:33