html - 如何对齐图像正下方的文本？

Question

我曾经知道如何将图像放在顶部，然后对齐图像下方的文本，使其保持在图像宽度的边界内。但是，现在我不知道该怎么做。这是如何实现的？

Answer 1

您的 HTML:

<div class="img-with-text">
    <img src="yourimage.jpg" alt="sometext" />
    <p>Some text</p>
</div>

如果您知道图像的宽度，您的 CSS:

.img-with-text {
    text-align: justify;
    width: [width of img];
}

.img-with-text img {
    display: block;
    margin: 0 auto;
}

否则图片下方的文字将自由流动。为防止这种情况，只需为您的容器设置一个宽度。