将文字与图片对齐答案

【问题标题】：Align text with a picture将文字与图片对齐
【发布时间】：2016-06-12 16:33:07
【问题描述】：

我希望将我的文字与我的图片对齐。文字不能超出图片边框，应放在图片下方。我曾尝试将其放入容器和 div 中，但尚未成功。

在图片上，您将看到当前情况（图 1）和想要的情况（图 2）。

当前代码（经过多次修改）

<div style="text-align:center">
    <a href="testing"><img src="test.jpg" width="800px" height="150px"></a><br/>
    <p align="left"> This a test. 
</p>
  </div>  
  <br>

【问题讨论】：

查看原帖。
文字会扩大到填充div，所以你应该在div上设置一个fixed with，使图像宽度为100%
我该怎么做？
因为无法解释的反对而赞成

标签： html image alignment

【解决方案1】：

将宽度设置为<div> 而不是<img>，并以margin:auto; 居中：

<div style="text-align:center;width:300px;margin:auto;">

见JSFiddle

您也可以将 div 设为 display:inline-block; 并将 text-align:center; 设置为包含元素：

<div style="text-align:center;">
   <div style="text-align:center;width:300px;display:inline-block;">

见JSFiddle

【讨论】：

工作正常。谢谢！！

【解决方案2】：

试试这个

HTML

<div class="img_cont">
    <a href="testing" class="img_link"><img src="test.jpg" class="the_img"></a><br/>
    <p class="text"> This a test. 
</p>
</div>

CSS

.img_cont{
    width:200px; //or any other width
    height:auto;
}
.testing{
    text-decoraion:none;
    border:none;
}
.the_img{
    width:100%; //make the image fill the container to the full
    height:auto; // in order to maintain the aspect ratio of the image
}
.text{
    // your text styles go here
}

【讨论】：

它仍在图片的边界之外