CSS, centered div, shrink to fit?

DIV elements are block-level by default, which means they automatically get 100% width. To change that, use this CSS...

.centerBox {
  display:inline-block;
  text-align:center;
}


<div class="centerBox">
  Some text
</div>

EDIT: Updated to use a CSS class rather than inline attribute and changed "block" to "inline-block"

I don't know, the solutions here seem partially right, but then don't really work. Based on Josh Stodola's answer, here's a cross-browser solution tested in Firefox, Safari, Chrome and IE 7, 8 & 9

CSS:

body {
    text-align: center;
}

#centered-div {
    text-align: left;
    background: #eee;

    display: inline-block;

    /* IE7 bs - enables inline-block for div-elements*/
    *display: inline;
    zoom: 1;
}

Markup:

<div id="centered-div">
    Cum sociis natoque penatibus et magnis dis<br />
    parturient montes, nascetur ridiculus mus.
</div>

To add IE6 support (sigh), add _height: [yourvalue] to the div. Yes, with an underscore.

Test it yourself on JSFiddle: http://jsfiddle.net/atp4B/2/

Props to Josh Stodola, although he wasn't exactly right. The property needed is:

display: inline-block;

Which has solved my problem. Yay!

<style type="text/css">
    /* online this CSS property is needed */
    p.block {
        text-align: center;
    }
    /* this is optional */
    p.block cite {
        border: solid 1px Red;
        padding: 5px;
    }    
</style>

<p>Some text above</p>
<p class="block"><cite>some text</cite></p>
<p>Some text below</p>

Hint: don't use DIVs for text blocks (for SEO and a better semantic purposes)

CSS, centered div, shrink to fit?

Related

Recent Posts