Question

我正在尝试水平和垂直对齐文本。使用de horizontal axis，我做了：

text-align: center;

它完美无缺。但我希望文本也在垂直轴上居中。我已经阅读了很多解决方案，但每个人都有不同的解决方案，我有点困惑......

http://jsfiddle.net/QLPTD/1/

谢谢！

Answer 1

CSS具有vertical-align属性，但使用它可能有点棘手。

有关详细信息，请参阅this page。

我有一个具有display: table;属性的外部div，然后内部表是display: table-cell;。然后我可以在内部div上做vertical-align: middle;。所有样式都应用于外部div。

<强> HTML

<div id="outer">
    <div id="menu_secciones" >
            Hello!
    </div>
</div>

<强> CSS

#outer {
    display: table;
    background-color: #dddddd;
    position: absolute;
    left: 0;
    height: 50%;
    width: 100%;
    top: 10%;
}
#menu_secciones
{
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}

DEMO

Answer 2

如果要垂直对齐文本，则应使用相同的行高和高度。

http://jsfiddle.net/QLPTD/7/

Answer 3

你可以做的一件事是

line-height: 25px;

您不提供高度，而是自动设置高度。你可以尝试这个，它对我来说大部分时间都有效。

Answer 4

您可以考虑使用填充优势：http://jsfiddle.net/QLPTD/15/

只要您的填充顶部和填充底部相同，并且相应地设置了显示和高度，您的文本应该显示为垂直居中

Answer 5

如果您只有一行文字，则行高仅是一个很好的解决方案。提到的方法 sachleen 也是另一种可行的选择。另一种方法是使用绝对定位...例如....

<div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu massa nisi, pharetra elementum felis. Donec iaculis eros eu sapien pharetra tempor</p>
</div>


<style type="text/css">

  div {
    width:300px;
    height:300px;
    border:1px solid red;
}

p {
   display:block;
   width:300px;
   border:1px solid black;
   position:absolute;
   top:28%;
   text-align:center;
}

</style>

最高百分比会因您的内容而异。

http://jsfiddle.net/krishollenbeck/gHXf7/

如何在div上居中文本

5 个答案: