如何在图像下方直接对齐文本？ [英] How can I align text directly beneath an image?

问题描述

我曾经知道如何将图像放在顶部，然后调整图像下方的文本，使其保持在图像宽度的边框内。但是，现在我不知道如何做到这一点。这是如何实现的？

I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?

推荐答案

您的HTML：

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

如果您知道图片的宽度，您的CSS：

If you know the width of your image, your CSS:

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

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

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

Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.

这篇关于如何在图像下方直接对齐文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！