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

问题描述

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

解决方案

您的 HTML:

<img src="yourimage.jpg" alt="sometext"/><p>一些文字</p>

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

.img-with-text {文本对齐:对齐；宽度:[img 的宽度]；}.img-with-text img {显示:块；边距:0 自动；}

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

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?

解决方案

Your HTML:

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

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屋！