使表格单元格水平折叠

Question

我试图在一些文本旁边放一张图片。文本需要垂直位于图像的一半

[IMG]
[IMG] Here is the text
[IMG]

我得到以下结果，因为两个单元格div 的宽度相等，而不是匹配的内容宽度：

[IMG]
[IMG]                                Here is the text
[IMG]

代码是预先存在的。有一个表容器div：

.vertical-align-container {
    display: table;
    table-layout: auto;
    width: 100%;
}

和两个表格单元格div：

.vertical-align-child {
    display: table-cell;
    vertical-align: middle;
    padding-left: 15px;
}

因此，无论我做什么，表格单元格的宽度都是相等的。如何让第一个与内容宽度匹配，第二个填充容器的其余部分？

.HTML：

<div class="vertical-align-container">
    <div class="vertical-align-child" style="padding-left: 0;">
        <img src="path/img.png">
    </div>
    <div class="vertical-align-child">
        <p><a href="#">Here is the text</a></p>
    </div>
</div>

如您所见，我已经尝试了几件事，但是我在这里包含的是表格布局，我认为应该这样做吗？

Answer 1

我认为你可以用flexbox来解决这个问题。

可以使用 align-items 属性进行垂直居中。

.container,
.text {
  display: flex;
}
.text {
  align-items: center;
  padding-left: 1rem;
}
.image img {
  display: block;
  width: 100%;
  height: auto;
}

<div class="container">
  <div class="image">
    <img src="https://unsplash.it/200">
  </div>
</div>
<div class="container">
  <div class="image">
    <img src="https://unsplash.it/200">
  </div>
  <div div class="text">
    <p>
      <a href="#">Here is the text</a>
    </p>
  </div>
</div>
<div class="container">
  <div class="image">
    <img src="https://unsplash.it/200">
  </div>
</div>

Answer 2

在这里找到了一个丑陋的解决方法：CSS 表格列自动宽度

我遇到的问题是我的图像设置为 100% 宽度，同时使用我希望它停止的大小的最大宽度。显然，该表不愿意以最大宽度作为内容大小读取，因此它选择了 50%。

我破解了图像的宽度并将表格单元格设置为具有 nowrap，就像链接的问题一样。这绝不是一个好的答案，但它可以快速修复。