html - 如何将一组左对齐的div居中？

我想达到的目标是在同一条起跑线上把一个项目放在另一个项目的下方，但要集中在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

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

最佳答案

你是说这样？https://jsfiddle.net/7vdbLcL9/1/
你的.container得到text-align:center，
并且#wrapper得到display:inline-block（这样它将只需要足够宽，并且可以通过父元素的文本对齐居中）和text-align:left来抵消center对父元素的影响。