多行垂直对齐答案

【问题标题】：Multiline vertical align多行垂直对齐
【发布时间】：2017-03-09 16:56:51
【问题描述】：

我有一张图片，我想用<br> 多行。文字需要居中对齐。

<table id="myTable">
    <tr>
        <td>
            <a>
                <div>
                    <img class="vertical-align-icon-middle" src="/images/friendjoined_icon.png" />
                </div>

            </a>
            <div class="user-details">
                <div class="username-div"><span class="text-design">My profile</span></div><br/>
                <div class="points-rank">
                    <span class="secondary-text no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span></div>
            </div>
        </td>
        <td class="right-icon"><p>hi</p></td>
    </tr>

</table>

我不知道该怎么做才能将文本保持在中间，因为图像是响应式的，它可以调整大小。需要帮助，谢谢。

我想要什么：

is something like this

【问题讨论】：

您是否只想对齐用户详细信息？你在它自己的单元格中有“hi”，这就是我问的原因，你不应该真正使用表格进行布局，因为它们是用于表格数据的。如果您只想使用您拥有的标记将用户详细信息中的文本居中，您可以使用#myTable img { width: 100%; height: auto; } #myTable .user-details { text-align: center; }
如果您要使用表格，为什么不将用户详细信息添加到您添加“嗨”的同一单元格中？

标签： html css vertical-alignment

【解决方案1】：

正如我在我的 cmets 中提到的，你应该避免使用表格进行布局，如果你想并排放置一个图像和文本，我会使用两个 div，这样你就会有类似的东西：

.image-block,
.user-details {
  display: table-cell;
  vertical-align: middle;
  padding: 5px;
}

<div class="image-block">
    <img class="vertical-align-icon-middle" src="http://placehold.it/400x200/" alt="" />
</div>
<div class="user-details">
  <div class="username-div">
    <span class="text-design">My profile</span>
  </div>
  <div class="points-rank">
    <span class="secondary-text no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span>
  </div>
</div>

【讨论】：