代码之家 › 专栏 › 技术社区 › Jack Champion

水平对齐,文本位于图像顶部?

text-align image html

2

Jack Champion · 技术社区 · 7 年前

嗨!

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>

1 回复 | 直到 7 年前

1

0

user3589620 user3589620 7 年前

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