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

两个表格单元格：

.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属性进行垂直居中。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在这里找到一个丑陋的解决方法： listener

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

我在图片的宽度上进行了攻击，并将表格单元格设置为nowrap，就像链接的问题一样。它绝不是一个好的答案，但它可以快速解决。

获取表格单元格以水平折叠

2 个答案: