Bootstrap - make div size of content + centered

HTML & CSS
1

I am using Bootstrap 3, and trying to figure out how to
create a div that stretches to the same width of its content.

Everything I try, pretty much makes the div 100% width,
or I have to enter a fixed size which is not what I want.

I uploaded the site here:
http://www.chrisdrogaris.com/temp/PROJECT%20-%20mint/main.html

The section I tested is where it says: testtesttesttesttesttesttest

I basically just want a div around the test text that is the same size as it.

Thanks for any help.

Take care,
Chris

2

You can use div {display:table;margin:0 auto;}. display:table hugs its contents, margin:0 auto centers it in its container. There are other methods, but this is the easiest. IE8+

3

As Ron said display:table will do what you want as widthless tables can be centred with margin:auto unlike widthless divs.

If you need less that IE8 support (which I doubt as bootstrap doesn’t really support IE7 IIRC) then you can use display:inline-block instead. Although IE7 and under don’t understand inline-block natively on block elements they can be fixed with a simple hack as follows.


.el{
display:inline-block;
*display:inline;/* ie7 and under inline-block hack */
*zoom:1.0;/* "  " */
}

You would then just need text-align:center on the parent of that div as inline-block elements are then centred just like normal text.

4

Perfect! Thanks guys… works great.