如何将一组左对齐的div中心化？

Question

我想要实现的是在同一起始行中将项目放在另一个下面但是以div为中心。这是我的小提琴：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>

CSS：

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

我想得到这个：

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

        Zmaja od Bosne 5
        71 000 Sarajevo
        Bosnia and Herzegovina

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

Answer 1

你是说这个意思吗？ https://jsfiddle.net/7vdbLcL9/1/

.container获取text-align:center，

并且#wrapper得到display:inline-block（因此它只会根据需要加宽，并且可以通过父级的text-align居中）和text-align:left来对抗效果在父元素上的center。

Answer 2

只需使用flexbox：

lorem ipsum

DEMO

Flexbox的好处：

1. 最小代码;效率很高
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. 响应
6. it's the future of CSS layouts

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。

Answer 3

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

Answer 4

你在找这样的东西吗？

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