水平对齐两个左面向文本

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>