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

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

Answer 1

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.

Answer 2

Just use a flexbox :

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

#wrapper { }

DEMO

Flexbox benefits:

1. minimal code; very efficient
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex items
5. it's responsive
6. 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 .

Answer 3

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> 

Answer 4

.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;
}