html - 水平对齐，文本在图像顶部？

Question

嗨! 我在我想要的图像旁边有文字。如下所示。

https://image.ibb.co/bWWO0F/Capture.jpg

然而，我正在努力将文字放在图像的顶部，就像我在这里的惊人画作一样......

https://image.ibb.co/ksgZ7v/Capture1.jpg

我该怎么做？

这是我的 HTML...

<div>
    <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="image.jpg">
    <p>Works.</p>
</div>

Answer 1

使用 flexbox .

.flexbox {
  display: flex;
  border: 1px solid;
  padding: 15px;
}

.img-circle {
  border-radius: 100%;
}

<div class="flexbox">
  <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="http://placehold.it/350x350">
  <p>Works.</p>
</div>