html - 在Div内居中Div，宽度为自动

我在Div1中有一个Div1和Div2。
Div2中有图像和可变长度的文本，我想将Div2的宽度保持为自动，并在Div1中居中。

如下所述：

+-------------------------------------------------------------------+
| Div1                                                              |
|               +-------+--------------------+                      |
|               | Image |  Some Test Text    | <- Div2: Width:auto; |
|               +-------+--------------------+                      |
|                                                                   |
+-------------------------------------------------------------------+

我正在尝试创建它，但是面临将背景Div覆盖到文本和图像的问题，实际上我想将Div的高度和宽度保持为Auto，但无法按预期工作：

http://jsfiddle.net/2vhr4nLz/

最佳答案

如果我正确理解了您的问题，则应使用css3 flexbox来解决。

.text-and-image-holder {
  justify-content: center;
  align-items: center;
  display: flex;
}

在css上方将创建以下布局，如您在工作片段中所见，文本和图像将相对于彼此垂直居中对齐：

+---------------------------------------+
|            |  Lorem ipsum dolor sit   |
|            |  amet, lorem ipsum dolor |
|            |  sit amet, lorem ipsum   |
|   <img>    |  dolor sit amet, lorem   |
|            |  ipsum dolor sit amet,   |
|            |  lorem ipsum dolor sit   |
|            |  amet, lorem ipsum       |
+---------------------------------------+

.image-style {
  margin-right: 20px;
}

.text-style {
  font-size: 15px;
}

.text-and-image-holder {
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  background: red;
  padding: 20px;
  display: flex;
}

<div class="text-and-image-holder">
  <img src="http://placehold.it/30x30" class="image-style">
  <div class="text-style">Vertically Center Text Here</div>
</div>
<div class="text-and-image-holder">
  <img src="http://placehold.it/30x30" class="image-style">
  <div class="text-style">Very long text Vertically Center Here and lorem ipsum dolor sit amet.</div>
</div>

关于html - 在Div内居中Div，宽度为自动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40505931/