How to center a group of left-aligned divs?

Question

What I'm trying to achieve is to have items one below another in same starting line but to be centered in div. This is my fiddle: https://jsfiddle.net/7vdbLcL9/

<div class="container">
<div id="wrapper">
        <div id="inner1">Zmaja od Bosne 5</div>
        <div id="inner2">71 000 Sarajevo</div>
        <div id="inner3">Bosnia and Herzegovina</div>
</div>
</div>

And the CSS:

.container{
    width:40%;
    border:1px solid black;
}
#wrapper{
    margin-left:auto;
    margin-right:auto;
    height:auto; 
    width:auto;
    text-align:center
}

I want to get this :

----------------------------------

        Zmaja od Bosne 5
        71 000 Sarajevo
        Bosnia and Herzegovina

----------------------------------

I don't understand; aren't they already centered? – frenchie Nov 05 '15 at 12:52 — frenchie, Nov 05 '15 at 12:52

score 5 · Answer 1 · answered Nov 05 '15 at 12:53

5

You mean like this? https://jsfiddle.net/7vdbLcL9/1/

Your .container gets text-align:center,

and the #wrapper gets display:inline-block (so that it will be only as wide as needed, and can be centered via text-align of the parent) and text-align:left to counter the effect of center on the parent element.

answered Nov 05 '15 at 12:53

CBroe

91,630
14
92
150

2

@None If this answer is what You want, then please, accept it (checkmark) because others who faced with similar problem. Just to be easiest to find write answer. – nelek Nov 05 '15 at 12:58

score 2 · Answer 2 · edited May 23 '17 at 12:07

Just use a flexbox:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:40%;
    border:1px solid black;
}

#wrapper { }

DEMO

Flexbox benefits:

minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex items
it's responsive
it's the future of CSS layouts

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

score 0 · Answer 3 · edited Nov 05 '15 at 13:51

Are you looking for something like this?

#wrapper {
  display: block;
  text-align: center;
  line-height: 0;
  font-size: 0;
  margin-bottom: 20px;
}
#wrapper div {
  display: inline-block;
  width: auto;
  
}

#wrapper2 {
  display: table;
}
#wrapper2 div {
  display: table-cell;
  width: 1%;
}

div div { 
  width: 200px; line-height: 100px; background: lightseagreen; font-size: 12px; 
  border: 1px solid yellow;
  text-align: center;
  padding: 0 1em;
}

<div id="wrapper">
        <div id="inner1">Zmaja od Bosne 5</div>
        <div id="inner2">71 000 Sarajevo</div>
        <div id="inner3">Bosnia and Herzegovina</div>
</div>


<div id="wrapper2">
        <div id="inner1">Zmaja od Bosne 5</div>
        <div id="inner2">71 000 Sarajevo</div>
        <div id="inner3">Bosnia and Herzegovina</div>
</div>

score 0 · Answer 4 · edited Nov 05 '15 at 13:51

0

.container{
    width:40%;
    border:1px solid black;
    display:flex;
}
#wrapper{
    margin-left:auto;
    margin-right:auto;
    height:auto; 
    width:auto;
    text-align:center
    display:flex;
}

edited Nov 05 '15 at 13:51

Legionar

7,472
2
41
70

answered Nov 05 '15 at 13:12

Abhishek Mahajan

28
5

How to center a group of left-aligned divs?

4 Answers4