CSS : centering absolute positioned text inside relative parent

html css css-position centering
vlad picture vlad · Aug 9, 2013 · Viewed 30.2k times · Source

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/

Answer

amaurym picture amaurym · Aug 9, 2013

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/

Related questions

How to center a "position: absolute" element

I'm having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered?

Read More
How does the "position: sticky;" property work?

I want to make the Navigation Bar stick to the top once I scroll to it, but it's not working and I have no clue why. If you can please help, here is my HTML and CSS code:

Read More
How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

I have a div positioned fixed on the left side of a web page, containing menu and navigation links. It has no height set from css, the content determines the height, the width is fixed. The problem is that if …

Read More