Question

我有一张图片，我想要多行<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

Answer 1

正如我在评论中提到的，你应该避免使用表格进行布局，如果你想要一个图像和文字并排，我会使用两个div，这样你就可以了类似的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

多线垂直对齐

1 个答案: