如何使用CSS垂直居中文本？ [英] How to vertically center text with CSS?

问题描述

我有一个div标签，其中包含文本，我想将此div的内容垂直居中。

这是我的div样式：

  #box {height：90px; width：270px;背景：＃000; font-size：48px; font-style：oblique;颜色：#FFF; text-align：center; margin-top：20px; margin-left：5px;}  

 < div Id = box> < / div>  

解决方案

您可以尝试这种基本方法：

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

 < div& Hello World！< / div>  

单行文本，因为我们将行的高度设置为与包含框元素相同的高度。

---

多用途方法

这是另一种垂直对齐文本的方法。这个解决方案将适用于单行和多行文本，但它仍然需要一个固定高度的容器：

  div {height：200px; line-height：200px; text-align：center; border：2px dotted＃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。非烯酰胺类。 < / span>< / div>  

将< div> 设置为垂直居中对齐< span> < div> 的行高等于其高度，并使< span> c> vertical-align：middle 。然后，它将< span> 的行高设置回正常，因此其内容将自然流入块内。

---

模拟表格显示

这里是另一个选项，可能不适用于浏览器不支持 display：table 和显示：table-cell （基本上意味着Internet Explorer 7）。 HTML与第二个示例相同：

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

 < div& < / span> 
 p> 

使用CSS我们'模拟'表显示行为，因为表支持垂直对齐：

  div {
 display：table; 
 width：250px; 
 height：100px; 
 text-align：center; 
} 
 
 span {
 display：table-cell; 
 vertical-align：middle; 
} 
  

---

使用绝对定位< h2>

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

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

Here is my div style:

#box
{
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}

<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</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 that means Internet Explorer 7). 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 CSS we 'simulate' table display behavior, since tables support vertical alignment:

div {
  display: table;
  width: 250px;
  height: 100px;
  text-align: center;
}

span {
  display: table-cell;
  vertical-align: middle;
}

---

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屋！