Question

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

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>

Answer 2

使用break标记，您可以使用简单的html完成此操作。

<label>Text</label>
<br>
<img>

是的，就是这么简单，但它不是那么可扩展的。我的意思是你可以拆分线但你实际上并没有决定高度或位置或实际上是什么。为了使这个方法成为正确而不是草率，你需要实现css。

水平对齐，图像顶部是否有文字？

2 个答案: