将文字与图片对齐

我希望将我的文字与我的图片对齐。文字不能超出图片的边界，应置于其下。我曾尝试将其放入容器和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>

来源

2016-06-11 John Doe

您的代码请 –

查看原文。 –

文本将扩大以填充div，因此您应该在div上设置一个固定值并使图像宽度为100％ –

设置宽度与<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

来源

2016-06-11 08:52:57

工作正常。谢谢！！ –

欢迎您:) –

尝试这个

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 
}

来源

2016-06-11 08:38:04

它仍在走出图片的边界 –

将文字与图片对齐

回答

相关问题