我如何垂直居中文本与CSS？ [英] How do I vertically center text with CSS?

问题描述

以下是我的div风格：

#box {height：170px; width：270px;背景：＃000; font-size：48px;颜色：#FFF; text-align：center;}

< div id = 框 > Lorem ipsum dolor sit

什么是最佳方式要做到这一点？

解决方案

您可以尝试以下基本方法：

  div {height：90px; line-height：90px; text-align：center; border：2px dashed＃f69c55;}  

< div> Hello World！< / div>

它只适用于单行文本，因为我们将行的高度设置为与包含box元素相同的高度。

---

更多多功能方法

这是垂直对齐文本的另一种方法。这个解决方案将适用于单行和多行文本，但仍需要一个固定高度的容器： jsdata-hide =falsedata-console =truedata-babel =false>

  div {height：200px; line-height：200px; text-align：center; border：2px dashed＃f69c55;} span {display：inline-block; vertical-align：middle; line-height：normal;}  

< div> < span> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Haec et tu ita posuisti，et verba vestra sunt。非农林牧渔，动物类动物。 < / div>< / code>

通过设置< div> ，纵向居中对齐< span> < div> 的行高等于其高度，并使< span> c> vertical-align：middle 。然后它将< span> 的行高设置回正常，所以它的内容将在块内自然流动。

---

模拟表格显示

这是另一个选项，它可能不适用于较旧的不支持 display：table 和的浏览器display： table-cell （基本上只是Internet Explorer 7）。使用CSS我们模拟表格行为（因为表格支持垂直对齐），HTML与第二个例子相同：

  div {display：table; height：100px;宽度：100％; text-align：center; border：2px dashed＃f69c55;} span {display：table-cell; vertical-align：middle;}  

< div> < / span>< / div>

---

使用绝对定位

该技术使用绝对定位的元素设置顶部，底部，左侧和右侧为0.它在Smashing Magazine的一篇文章中有更详细的描述， CSS中的绝对水平和垂直居中 。

I have a div element which contains text, and I want to align the contents of this div vertically center.

Here is my div style:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

<div id="box">
  Lorem ipsum dolor sit
</div>

What is the best way to do this?

解决方案

You can try this basic approach:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

It only works for a single line of text though, because we set the line's height to the same height as the containing box element.

---

A more versatile approach

This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

The CSS just sizes the <div>, vertically center aligns the <span> by setting the <div>'s line-height equal to its height, and makes the <span> an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the <span>, so its contents will flow naturally inside the block.

---

Simulating table display

And here is another option, which may not work on older browsers that don't support display: table and display: table-cell (basically just Internet Explorer 7). Using CSS we simulate table behavior (since tables support vertical alignment), and the HTML is the same as the second example:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

---

Using absolute positioning

This technique uses an absolutely positioned element setting top, bottom, left and right to 0. It is described in more detail in an article in Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS.

这篇关于我如何垂直居中文本与CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！