如何在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 horizontal 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项内部，因为该flex项本身不是flex容器，所以旧的非flexbox CSS方式可以按预期工作.但是，如果向当前的伸缩容器中添加其他伸缩项目，则两个伸缩项目将被水平放置.要使其垂直放置，请将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.

还有另一种进行居中的方法:通过不为Flex容器的主轴和交叉轴上的分布指定center，而是在flex项上指定margin: auto来占用其中的所有多余空间所有四个方向，并且均匀分布的边距将使flex项在所有方向上居中.除存在多个弹性项目外，此方法均有效.此外，该技术在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屋！