set div width to content without inline-block and keep divs under each other center aligned

Question

I want some divs to get their width from their content. Display:inline-block does this, but I also want the divs to be under each other, not next to each other as floated.

Using float:left instead of inline-block does this, but I want the divs to be center aligned, not left aligned. How can I do this?

score 7 · Accepted Answer · answered May 29 '13 at 05:03

7

on the parent div put white-space: pre-line; on the child divs add clear : both

#wrapper{ text-align: center; white-space: pre-line; }
#div1, #div2{

    display: inline-block;    
    clear: both;
    border: 1px solid grey;
    margin: 3px auto 3px auto;
    width: auto;

}

<div id="wrapper">
     <div id="div1" class="clearfix">some content here that is bigger</div>
     <div id="div2" class="clearfix">some content here</div>
</div>

http://jsfiddle.net/judsonmusic/8HCWp/

answered May 29 '13 at 05:03

Judson Terrell

4,204
2
29
45

Nice solution, but `pre-line` will make it difficult to keep the HTML markup clear, for example if you insert some empty lines between your `div1` and `div2` tags, the view will be harmful. See this [jsFiddle](http://jsfiddle.net/8HCWp/2/). – May 29 '13 at 05:11
True, but I also dont make a habit of leaving that much space between lines of code haha. But true. Looks like you win this one. – Judson Terrell May 29 '13 at 05:12
I can see that this solution works with borders, whereas NOX's solution there is a problem with rendering borders. I'll just have to be aware of space between lines of code! – IlludiumPu36 May 29 '13 at 05:41
Just wanted to mention that another solution would be to wrap individual span tags around each text allowing the span to have the border while the div has block and clear. It would be a little more code but more "solid" approach. – Judson Terrell May 29 '13 at 11:58

score 3 · Answer 2 · answered May 29 '13 at 05:06

3

Working jsFiddle Demo

Consider the following markup:

<div class="container">
    <div class="text">apple</div>
    <div class="text">banana</div>
    <div class="text">kiwi</div>
    <div class="text">orange</div>
</div>

Because you want to align your elements, you must use inline, then we will break them with :after:

.container {
    text-align: center;
}

.text {
    background: yellow;
    display: inline;
}

.text:after {
    content: '';
    display: block;
}

answered May 29 '13 at 05:06

Isn't there a bug in IE8 with the content property? – Judson Terrell May 29 '13 at 05:13
Maybe, I don't test it, but as you see, the question is tagged with CSS3 `;)`. – May 29 '13 at 05:17
I can see that your fiddle works, but there is a problem with borders and padding See http://jsfiddle.net/uvSfK/ – IlludiumPu36 May 29 '13 at 05:29
1

@PeterBrowne So you should change your markup, I think. Put an `span` inside your `div`s and style it, check this [jsFiddle](http://jsfiddle.net/uvSfK/1/). – May 29 '13 at 05:43

score 0 · Answer 3 · answered May 18 '18 at 16:33

As mentioned in this thread, there's also a flex solution to this problem:

#container > p {
  border-bottom: 2px solid black;
}
    
#container {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

<div id="container">
  <p>A text</p>
  <p>A text</p>
  <p>A longer text</p>
</div>

Manish Jangir · Answer 4 · 2013-05-29T05:11:00.207

html is

<div>
   abc <div style="margin:4px auto;width:100px;">div1</div><br/>
   abc <div style="margin:4px auto;width:100px;">div1</div><br/>
   abc <div style="margin:4px auto;width:100px;">div1</div><br/>
   abc <div style="margin:4px auto;width:100px;">div1</div><br/>
</div>

and style sheet is

div{
    border:1px solid;
    padding:10px;
    display:inline-block;
   }

check demo at http://jsfiddle.net/xupHN/

set div width to content without inline-block and keep divs under each other center aligned

4 Answers4

Linked