如何居中對齊兩個div？

Question

如何對齊兩個內嵌div，以使其相鄰的邊緣居中？

所以我希望它看起來像這樣：

    div1div1 div2div2
        div1 div2
div1div1div1 div2div2

我嘗試使用內聯塊，如下所示，但它只是將每行居中。

 .container { text-align: center; } .left-div { display: inline-block; } .right-div { display: inline-block; } 

 <div class="container"> <div class="left-div">div1div1</div> <div class="right-div">div2div2</div> </div> <div class="container"> <div class="left-div">div1</div> <div class="right-div">div2</div> </div> <div class="container"> <div class="left-div">div1div1div1</div> <div class="right-div">div2div2</div> </div> 

Answer 1

https://jsfiddle.net/fkfmh7md/更改div之間的距離，將padding中的5px更改為5px：其他任何值

 .container { display: table; table-layout: fixed; width: 100%; } .container div { display: table-cell; padding: 0 5px; } .container div.left { text-align: right; } 

 <div class="container"> <div class="left">div1div1</div> <div>div2div2</div> </div> <div class="container"> <div class="left">div1</div> <div>div2</div> </div> <div class="container"> <div class="left">div1div1div1</div> <div>div2div2</div> </div>