CSS：将绝对定位的文本居中放置在相对父项中 [英] CSS : centering absolute positioned text inside relative parent

问题描述

如何将绝对定位的文本居中放置在流体相对父项中？我试图在父元素上使用 text-align：center ，但它始终居于子元素的左角，而不是元素本身。

http://jsfiddle.net/sucTG/2/

解决方案

事情是这样的： position：absolute; 修改元素的宽度以适应其内容， text-align：center; 将文本居中在元素块的宽度内。所以如果你添加一个 position：absolute; 不要忘了增加元素的宽度，否则 text-align：center; 属性将无用。

解决此问题的最佳方法是添加 width：100％; 和a left：0px; 在.text部分。

http://jsfiddle.net/27van/

How can I center absolute positioned text inside fluid relative parent? I'm trying to use text-align:center on parent elements but it always centers child's left corner, not element itself.

http://jsfiddle.net/sucTG/2/

解决方案

The thing is that position:absolute; modifies the element's width to fit its content, and that text-align: center; centers the text within the element block's width. So if you add a position: absolute; don't forget to increase the width of the element, or else the text-align: center; property will be useless.

The best way to solve this is to add a width: 100%; and a left: 0px; in the .text section.

http://jsfiddle.net/27van/

这篇关于CSS：将绝对定位的文本居中放置在相对父项中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！