如何在div上居中文本

I'm trying to align a text horizontal and vertically. Using de horizontal axis, I made:

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

text-align: center;

And it worked perfectly. But I want the text to be center on the vertical axis too. I've read lots of solutions, but everybody has different solutions and I'm a bit confused...

它运作得很好。但我希望文本也在垂直轴上居中。我已经阅读了很多解决方案,但每个人都有不同的解决方案,我有点困惑......

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

Thanks!

5 个解决方案

#1

Well one thing you can do is

你可以做的一件事是

line-height: 25px;

You do not provide a height, but instead the height is automatically set. You can try this, it works most of the time for me.

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

#2

CSS has a vertical-align property but using it can be a little tricky.

CSS具有垂直对齐属性,但使用它可能有点棘手。

See this page for more info.

有关详细信息,请参阅此页面。

I have an outer div that has the display: table; property and then the inner table is display: table-cell;. I can then do vertical-align: middle; on the inner div. All of your styles are applied to the outer div.

我有一个外部div,它有display:table;属性然后内部表显示: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;
}

DEMO

#3

if you want to align text vertically, you should use same line-height and height.

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

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

#4

You can consider using padding to your advantage: http://jsfiddle.net/QLPTD/15/

你可以考虑使用padding来获得优势:http://jsfiddle.net/QLPTD/15/

As long as your padding-top and padding-bottom are they same and you have your display and height set accordingly, your text should appear to be vertically centered

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

#5

Line height is only a good solution if you are going to only have one line of text. The method sachleen mentioned is also another viable option. Another way you could do it is by using absolute positioning... For example....

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

The top % would vary depending on your content.

最高百分比将根据您的内容而有所不同。

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

#1