Question

我希望将我的文字与我的照片对齐。文字不能超出图片的边框，应放在图片的边框之下。我已经尝试将它放入容器和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>

Answer 1

试试这个

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

Answer 2

将宽度设置为<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 个答案: