CODEWITHSUNDEEP
htmlcss
None
None

Reputation: 9247

How to center a group of left-aligned divs?

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

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

Upvotes: 3

Views: 60

Answers (4)

Michael Benjamin
Michael Benjamin

Reputation: 371163

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.

Upvotes: 2

Hitmands
Hitmands

Reputation: 14179

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>

Upvotes: 0

Abhishek Mahajan
Abhishek Mahajan

Reputation: 28

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

Upvotes: 0

C3roe
C3roe

Reputation: 96250

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.

Upvotes: 5

Related Questions