Css inline block with center aligned

Question

I want the div to be the same width as the content that is display: inline-block;
but when I use this, text-align: center no longer works.
so my content just goes left and the inline block is applied to it.
eg:

 #div1 { position: relative; bottom: 10px; left: auto; text-decoration: overline underline; display: inline; text-align: center; } 

it no longer centers div text.
how can i get both effects of these two?

Answer 1

Give the text-align: center property to any other element and use that element inside your div.

eg.

 #div1 { position: relative; bottom: 10px; left: auto; text-decoration: overline underline; display: inline; } #p1 { text-align: center; } 

and then

 <div id="div1"> <p id="p1">blah blah blah</p> </div> 

That should work.

Answer 2

Getting the same div is the work of width not display . When you use text-align this property applies to all children of an element.

For example, in

 <div> <span>Text</span> Text </div> span { text-align: center; } 

This will apply to the text, not the range. This way you get the text centered, but the range will still be in its own location, left and just below the previous default element.

To check if text-align is applied or not, you can try checking the property of the child in the Developer Tools.

Jsfiddle for this: http://jsfiddle.net/afzaal_ahmad_zeeshan/eKrNt/

You can see that the property has been applied to the div , but instead. It was a child who was aligned with the center.

Your code:

 #div1 { position: relative; bottom: 10px; left: auto; text-decoration: overline underline; display: inline; text-align: center; } 

This is a clear answer, you align the text inside this div to the center.

And the mouseover event should be somewhere in the function or script. Which is caused by a hover event or the same.

Answer 3

try using this:

 margin-left:auto; margin-right:auto; 

in the parent div of the div you are trying to center.