如何在 div 块内居中文本(水平和垂直)? [英] How can I center text (horizontally and vertically) inside a div block?

问题描述

我有一个 div 设置为 display:block (90px height 和 width)，里面有一些文字.

I have a div set to display:block (90px height and width), and I have some text inside.

我需要将文本垂直和水平居中对齐.

I need the text to be aligned in the center both vertically and horizontally.

我尝试过 text-align:center，但它没有做垂直居中部分，所以我尝试了 vertical-align:middle，但它没有不工作.

I have tried text-align:center, but it doesn't do the vertical centering part, so I tried vertical-align:middle, but it didn't work.

有什么想法吗?

推荐答案

如果是一行文字和/或图像，那么很容易做到.只需使用:

If it is one line of text and/or image, then it is easy to do. Just use:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

就是这样.如果它可以是多行，那么它会更复杂一些.但是在 http://pmob.co.uk/ 上有解决方案.寻找垂直对齐".

That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".

因为它们往往是黑客或添加复杂的 div...我通常使用一个带有单个单元格的表格来做...以使其尽可能简单.

Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.

除非您需要让它在较早的浏览器(例如 Internet Explorer 10)上运行，否则您可以使用 flexbox.它被当前所有主流浏览器广泛支持.基本上，容器需要指定为弹性容器，并沿其主轴和横轴居中:

Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

为子项指定固定宽度，称为弹性项目":

To specify a fixed width for the child, which is called a "flex item":

#content {
  flex: 0 0 120px;
}

示例:http://jsfiddle.net/2woqsef1/1/

要收缩包装内容，甚至更简单:只需从 flex 项中删除 flex: ... 行，它就会自动收缩包装.

To shrink-wrap the content, it is even simpler: just remove the flex: ... line from the flex item, and it is automatically shrink-wrapped.

示例:http://jsfiddle.net/2woqsef1/2/

以上示例已在包括 MS Edge 和 Internet Explorer 11 在内的主要浏览器上进行了测试.

The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.

如果您需要自定义一个技术说明:在 flex item 内部，由于这个 flex item 本身不是一个 flex 容器，旧的非 flexbox 方式的 CSS 可以按预期工作.但是，如果您向当前的 flex 容器添加额外的 flex 项，则这两个 flex 项将水平放置.要使它们垂直放置，请将 flex-direction: column; 添加到 flex 容器.这就是它在 flex 容器与其直接子元素之间的工作方式.

One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column; to the flex container. This is how it works between a flex container and its immediate child elements.

有一种进行居中的替代方法:不指定 center 为 flex 容器的主轴和横轴上的分布，而是指定 margin: auto 在 flex item 上占用所有四个方向的所有额外空间，均匀分布的边距将使 flex item 在所有方向居中.除非有多个弹性项目，否则这有效.此外，此技术适用于 MS Edge，但不适用于 Internet Explorer 11.

There is an alternative method of doing the centering: by not specifying center for the distribution on the main and cross axis for the flex container, but instead specify margin: auto on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.

它可以更常见地使用 transform 来完成，即使在较旧的浏览器(如 Internet Explorer 10 和 Internet Explorer 11)中也能很好地工作.它可以支持多行文本:

It can be more commonly done with transform, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:

position: relative;
top: 50%;
transform: translateY(-50%);

示例:https://jsfiddle.net/wb8u02kL/1/

上述解决方案为内容区域使用了固定宽度.要使用收缩包装宽度，请使用

The solution above used a fixed width for the content area. To use a shrink-wrapped width, use

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

示例:https://jsfiddle.net/wb8u02kL/2/

如果需要 Internet Explorer 10 的支持，那么 flexbox 将不起作用，上面的方法和 line-height 方法将起作用.否则，flexbox 就可以完成这项工作.

If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and the line-height method would work. Otherwise, flexbox would do the job.

这篇关于如何在 div 块内居中文本(水平和垂直)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！