1

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

text-align: center;

它工作得很好。但我也希望文本位于垂直轴的中心。我已经阅读了很多解决方案，但每个人都有不同的解决方案，我有点困惑......

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

谢谢！

4

5 回答 5

2

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

有关更多信息，请参阅此页面。

我有一个具有display: table;属性的外部 div，然后内部表是display: table-cell;. 然后我可以vertical-align: middle;在内部 div 上做。您的所有样式都应用于外部 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;
}​

演示

于 2012-06-21T16:06:09.543 回答
2

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

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

于 2012-06-21T16:06:44.963 回答
1

那么你可以做的一件事是

line-height: 25px;

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

于 2012-06-21T16:03:03.320 回答
0

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

只要您的 padding-top 和 padding-bottom 相同并且您相应地设置了显示和高度，您的文本应该看起来是垂直居中的

于 2012-06-21T16:06:10.107 回答
0

如果您只有一行文本，行高只是一个很好的解决方案。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/

于 2012-06-21T18:42:09.530 回答