CSS, centered div, shrink to fit?

Question

Here's what I want:

text text text text text text text text text text text
text text text text text text text text text text text
                   +-----------+
                   | some text |
                   +-----------+
text text text text text text text text text text text
text text text text text text text text text text text

...where the "some text" block is a div. I want the div to be the minimum width necessary to contain its text without wrapping. If the text is too long to fit without wrapping, then it's okay if it wraps.

I do NOT want to set an explicit width for the div. I don't want to set min-width or max-width either; like I said, if there's too much text to contain on one line without wrapping, then it's okay if it wraps.

Kind of related: http://stackoverflow.com/questions/450903/make-css-div-width-equal-to-contents — Casebash, Jun 09 '11 at 01:05
@StevenSoroka have a look at my answer about **flexbox** if this still matters to you... I know this question's quite old. — Peter Gordon, Jun 23 '15 at 17:44

Josh Stodola · Accepted Answer · 2009-03-27T17:51:48.893

84

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"

edited Mar 27 '09 at 17:51

answered Mar 27 '09 at 16:21

Josh Stodola

81,538
47
180
227

3

‘width: auto’ is redundant and can be omitted. You'd also need to set text-align-center on the parent, obviously. A technically correct approach, although possibly mutating a div to inline isn't quite what the OP wanted! – bobince Mar 27 '09 at 16:59
This doesn't quite work, since if you do have multiple lines of text, any formatting (borders, padding, etc.) are applied to each separate part. But inline-block DOES work! Yay! – dirtside Mar 27 '09 at 16:59
you can replace it with "span" element and then you won't need to specify "display: inline: width: auto" but your solution doesn't place "some text" in the center – Konstantin Tarkus Mar 27 '09 at 17:26
would it be possible to shrink div but still have it not let other elements take its place – Muhammad Umer Aug 26 '13 at 21:01

score 9 · Answer 2 · answered Jun 15 '12 at 08:29

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/

score 6 · Answer 3 · edited Dec 11 '14 at 14:57

6

<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)

edited Dec 11 '14 at 14:57

Reinstate Monica -- notmaynard

5,464
2
26
42

answered Mar 27 '09 at 16:15

Konstantin Tarkus

37,618
14
135
121

Well, agreed, but you're adding unnecessary elements as well (span). – Seb Mar 27 '09 at 16:50
It works with the correct css comments — `/* */` instead of `//`. Also, your image link was broken. – Reinstate Monica -- notmaynard Dec 11 '14 at 15:01

score 6 · Answer 4 · answered Mar 27 '09 at 17:00

6

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

display: inline-block;

Which has solved my problem. Yay!

answered Mar 27 '09 at 17:00

dirtside

8,144
10
42
54

1

inline-block doesn't work in some browsers. Don't use it if you need cross-browser support. – Konstantin Tarkus Mar 27 '09 at 17:32
inline-block works in all browsers that I know of. To handle IE < 8, you'll need to use this entire phrase: `display: inline-block; *zoom: 1; *display: inline;`. Make it a habit to write that entire thing whenever you need inline-block. Just PLEASE don't use `float` when what you really want is `inline-block`. – colllin Feb 23 '13 at 07:58

score 3 · Answer 5 · answered Jun 23 '15 at 17:43

I recommend flexbox! See what's possible at this website, solved by flexbox.

It's quite new but works in all the major modern browsers (IE10 uses -ms- prefix, IE11+, Firefox 31+, Chrome 31+, Safari 7+, ...) - see this chart.

Basically, vertical and horizontal centering, complete with dynamic sizing, can be accomplished in 4 statements:

parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

Make sure this parent actually is 100% height. You may need to set body and html to 100% height too.

My implementation of this can be seen at my own personal website, http://pgmann.cf.

score 2 · Answer 6 · edited Dec 11 '14 at 14:52

Here's an example I made of exactly what your looking for:
(jsFiddled here: http://jsfiddle.net/yohphomu/)

Warning:

I'm a CSS fanatic!!!

If I understand your question correctly, there is no need to set a height or width because their default setting is auto (that being said you can use auto), but the only problem with this is that if you wanted to change the background or put a border it will make it around more than the desired field. Why is that and how do we fix it, read on.

Or just copy and study the example.

Any one having this problem hasn't realized on thing (assuming you have this problem and are using div's) anything between div tags is considered (for understanding purposes) a complete set, meaning that in that div is all the things you want it to stand for (computers do what they're told, not what you want them to do) so (for example) in order to set the text-align to center it needs that whole lines space and (ultimately) if it had a border, it would border all the space it used. If you understand this read on, if not well can't help you there.

So now that we understand what happens, how do we fix it? Well we need one part to center it, the other to color it. In my example I used a div to center it and span to color. Did I need the div? I'm am positive I did not. I could have achieved the same thing by using the p to center (or I could get rid of the p and just use div). The reason I did this was to keep it organized.

Actually just because I didn't realize until I thought about it, but didn't feel like fixing it.

Hope this answered your question. Took you 4 years for an answer but me, 30 mins to figure it out (and I've been studying CSS for a few days now).

The Example:

<div class='container'>
    <div class="text">
        text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
    </div>
    <div class="holder">
        <p><span>text here</span></p>
    </div>
    <div>
        text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
    </div>
    </div>

Then css would look like:

.container {
width: 500px;
height: 500px;
}
.text {
    font-size: 20px;
}
.holder {
text-align: center;


}
span {
background-color: blue;
    border: 1px solid black;
}

Notice: I set the container with set width and height because I was working on a project at the same time and to simulate a full screen with text.

Also note that I have made it so that that the text has a separate background color with a border. I did this to show its measurements are independent and rescale when needed.

You are welcome, also I think people didn't understand your question. Hope I did.

This is wrong. The OP said "I do NOT want to set an explicit width for the div." Shrink wrapping is allowing the browser to determine the minimum size necessary, not specifying an absolute size that is smaller than 100%. — jimp, Sep 19 '16 at 16:43

Jan Turoň · Answer 7 · 2021-11-23T13:35:28.320

display: inline-block won't work if the block is not closed just before and just after the desired centered text. What you really need is to set width: fit-content; margin: auto; on block element, see the snippet.

.center {
  display: block;
  width: fit-content;
  margin: 1em auto;
  padding: .5em;
  text-align: right;
  background: yellow;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla diam sagittis, scelerisque ipsum ac, imperdiet tortor. Curabitur dapibus metus eu neque consectetur hendrerit. Cras interdum faucibus malesuada.

<div class="center">
  Lorem ipsum yourself, buddy!<br>
  Try to align this!
</div>

In auctor aliquam erat in pharetra. Suspendisse potenti. Pellentesque vehicula interdum sem vel tristique. Nullam erat nisl, imperdiet et turpis ut, ornare vulputate erat.

score 0 · Answer 8 · answered Dec 19 '13 at 11:25

0

<style>
p.one
{
border-style:solid;
border-width:2px;
border-color:red;
display:inline-block;
}
</style>

<p class="one">some text</p>

answered Dec 19 '13 at 11:25

Vladimir Bundalo

645
8
18

score 0 · Answer 9 · answered Jun 19 '15 at 18:01

0

HTML

<div class="outerdiv">
<div class="innerdiv">
++++TEXT+++
</div>
</div>

CSS

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

answered Jun 19 '15 at 18:01

Crismogram

906
15
27

score 0 · Answer 10 · answered Mar 27 '09 at 16:19

Something like this?

<html>
<head>
</head>
<body style="text-align: center;">

   <div style="width: 500px; margin: 0 auto;">

       <p>text text text text text text text text text text text text text text text text text text text text text text</p>

       <div>hello</div>

       <p>text text text text text text text text text text text text text text text text text text text text text text</p>

   </div>


</body>

CSS, centered div, shrink to fit?

10 Answers10