如何使文本与图片对齐并处于其下方？

Question

我曾经知道如何将图片放在顶部，然后将文本对齐到图片下方，以使其始终保持在图像的宽度边界内。然而，现在我不知道如何做到这一点。请问应该如何实现？

- Andie

---

在什么布局系统中？HTML？LaTeX？在这里给我们一个提示。 - dmckee --- ex-moderator kitten

Answer 1

你的 HTML：

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

如果您知道图片的宽度，您可以使用CSS:

如果您知道图像的宽度，则可使用CSS：

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

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

否则，图像下方的文本将自由流动。为了防止这种情况，只需为容器设置一个宽度即可。

- Jason

---

如果您想确保文本居中，可以将CSS更改为： .img-with-text {     text-align: center; } - Joey Baker

如果您将div本身浮动到左侧或右侧，则无需设置宽度，内容仍然居中。Html/css应根据最大组件自动居中，而不是根据全宽居中。 - djmj

获取图像宽度有几种方法：https://dev59.com/ZG035IYBdhLWcg3wGL5T#5633302 和 https://dev59.com/bHRB5IYBdhLWcg3wcm2d#623174。而这些方法需要图像源路径，如何获取请参考此链接：https://dev59.com/gU3Sa4cB1Zd3GeqPwZQ1#2765186。 - therobyouknow

你如何使用这种格式定位图片？当我设置 position:absolute 以便将图片放在我想要的位置时，文本就会隐藏在图片后面。 - Nick

这是因为你通过设置position:absolute将图像从文档流中移出，这意味着文本无法理解图像。最好使用边距、填充甚至position:relative来定位图像。 - Jason

Answer 2

你可以使用HTML5的<figcaption>标签：

<figure>
  <img src="img.jpg" alt="my img"/>
  <figcaption> Your text </figcaption>
</figure>

工作范例。

- Majid

---

链接已失效，代码无法将文本对齐到我这里，图像最终只会左对齐在文本上方。 - NibblyPig

@NibblyPig 感谢关注。我修复了链接。请查看示例并重试。 - Majid

我认为我误解了原始问题，我期望文本居中显示在下方。但是我发现可以通过在图像上添加CSS的text-align center轻松实现这一点。非常感谢！ - NibblyPig

Answer 3

这将使"A"在图像下方居中:

<div style="text-align:center">
  <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
  <br />
  A
</div>

那是ASP.Net，它会将HTML呈现为：

<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>

- JBrooks

---

-1 当然不起作用了，它使用的是ASP，即服务器端语言。问题没有标记为ASP，我们想要一个纯HTML的解决方案。 :D - Gordon Gustafson

@CrazyJugglerDrummer 在 ASP.Net 下面是它所创建的 HTML - 这就是我的观点。 - JBrooks

Answer 4

为了能够使文本对齐，您需要知道图像的宽度。您可以使用图像的普通宽度，也可以使用不同的宽度，但是IE6可能会因此而不适应并且无法缩放。

以下是所需内容：

<style type="text/css">
#container { width: 100px; //whatever width you want }

#image {width: 100%; //fill up whole div }

#text { text-align: justify; }    
</style>

 <div id="container"> 
     <img src="" id="image" /> 
     <p id="text">oooh look! text!</p> 
 </div>

- Gordon Gustafson

---

小心设置图像的宽度...否则你会把图像拉伸出来...天啊 - Jason

Answer 5

我不是HTML专家，但这是对我有效的方法：

<div class="img-with-text-below">
    <img src="your-image.jpg" alt="alt-text" />
    <p><center>Your text</center></p>
</div>

- user12563743