如何让一组左对齐的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

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

- None

---

我不明白，它们难道不已经居中了吗？ - frenchie

Answer 1

你是指像这样吗？https://jsfiddle.net/7vdbLcL9/1/ 你的 .container 会获得 text-align:center，而 #wrapper 则会获得 display:inline-block（这样它只会有所需的宽度，并且可以通过父元素的 text-align 居中），以及 text-align:left 来抵消父元素上 center 的效果。

- CBroe

---

如果这个答案是您想要的，请点击接受（打勾）因为其他遇到类似问题的人会方便地找到这个答案。 - nelek

Answer 2

只需使用flexbox：

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

#wrapper { }

演示

Flexbox的好处：

1. 代码量少，非常高效
2. 垂直和水平居中都很简单易懂
3. 等高列很简单易懂
4. 有多种选项可以对齐flex项目
5. 它是响应式的
6. 它是CSS布局的未来

请注意，所有主要浏览器都支持弹性盒子布局，除了IE 8和9。一些较新的浏览器版本（例如Safari 8和IE10）需要供应商前缀。为了快速添加所需的所有前缀，请在此处将您的CSS发布到左侧面板中：Autoprefixer。

- Michael Benjamin

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

- Abhishek Mahajan

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>

- Hitmands