我怎么能直接对准图像下方的文本？(How can I align text directly ben

我以前知道如何把顶部图像，然后，使其停留在图像的宽度的边框内证明图像下方的文本。 不过，现在我不知道如何做到这一点。 这是如何实现的呢？

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;
}

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

Answer 2:

您可以使用HTML5 <figcaption>

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

工作实例 。

Answer 3:

为了能够将文本证明，你需要知道图像的宽度。 你可以只使用图像的正常宽度，或使用不同的宽度，但IE 6可能会在你胡思乱想，并没有形成规模。

这里有您需要什么：

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

Answer 4:

该中心的图像下方的“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>

文章来源: How can I align text directly beneath an image?