水平對齊兩個左面向文本

Question

相鄰的div我想水平對準的是由其他兩個div的一個div：

• 一個從左邊，將包含一個圖像。
• 其他從右側，該div將包含文本，對齊到左側。

對齊將相對於一個容器，並且居中的div應該展開到最大寬度（而不是整個容器的寬度）。

This pen介紹了我所用表格佈局

這是HTML

<div class="container"> 
    <div class="centered"> 
    <div class="left"> 
     left text 
    </div> 
    <div class="right"> 
     very very very long right text 
    </div>  
    </div> 
</diV> 

而CSS

.container { 
    width: 200px; 
    background-color: red; 
} 

.centered { 
    display: table; 
    margin: 0 auto; 
    max-width: 100px; 
} 

.left { 
    background-color: green; 
    display: table-cell; 
    vertical-align: middle; 
} 

.right { 
    background-color: blue; 
    display: table-cell; 
    vertical-align: middle; 
} 

正如你所看到的事，右邊的空間藍色區域是居中div（綠色+藍色區域）的一部分，但它使div的內容不被居中。我想要的是藍色區域取最長的線條的寬度

Answer 1

如果您希望藍色區域隨其中的文本動態增長，同時保留內容的居中區域，則以下內容你在找什麼？

.container { 
 
    width: 200px; 
 
    background-color: red; 
 
    padding:0 20px; 
 
} 
 

 
.centered { 
 
    display: table; 
 
    margin: 0 auto; 
 
    max-width: 100px; 
 
} 
 

 
.left { 
 
    background-color: green; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    color:#fff; 
 
} 
 

 
.right { 
 
    background-color: blue; 
 
    display: block; 
 
    vertical-align: middle; 
 
    width:inherit; 
 
    color:#fff; 
 
}

<div class="container"> 
 
    <div class="centered"> 
 
    <div class="left"> 
 
     left text 
 
    </div> 
 
    <div class="right"> 
 
     very very very long right text very very very long right textvery very very long right textvery very very long right textvery very very long right textvery very very long right text 
 
    </div>  
 
    </div> 
 
</div>