두 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의 사이의 거리를 변화 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>