css - 使表格单元格水平折叠

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>