水平对齐两个相邻的div，左侧为文本

Question

我想水平对齐由另外两个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

如果您希望蓝色区域与其中的文字一起动态增长，同时保留一个居中的内容区域，以下内容将是您正在寻找的内容？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;