Question

在Html中，如何在其下方显示带有文本的图像链接，我已经阅读了图和图标题，但这似乎只适用于链接中的独立图像。

这就是我目前所拥有的，它在图像的左下角显示了470 x 470文本，而不是在其下方。

<a href="../images/txpvc3LLOvRWy5XLiJE9Zw==.jpg">470 x 470
<img 
src="../images/txpvc3LLOvRWy5XLiJE9Zw==_thumbnail.jpg" 
hspace="4" 
height="100" 
width="100" 
align="top">
</a>

Answer 1

您可以在<a>周围使用figure标记。如果您想将文字置于标题中心，则必须将数字设置为inline-block，并将图形设置为text-align: center

figure {
  display: inline-block;
}

figcaption {
  text-align: center;
}

<a href="#">
  <figure>
    <img src="https://via.placeholder.com/350x150" alt="demo image" />
    <figcaption>This is an example of a link, it goes nowhere...</figcaption>
  </figure>
</a>

Answer 2

不确定你想要什么。

我的假设是您希望图片和文字都可以点击并将文本对齐到底部。

将img设为阻止元素。这样文本就会自动出现在图像下方。

.testimg {display:block}

<a href="../images/txpvc3LLOvRWy5XLiJE9Zw==.jpg">
<img class="testimg"
src="http://miumosa.com/assets/products/sample-_20170209104115.png" 
hspace="4" 
height="100" 
width="100" 
align="top">470 x 470</a>

Answer 3

试试这个。

如果需要，您可以更改img的宽度。

.imgtext {
    text-align: center
    
}

.imgtext img {
    display: inline-block;
    margin: 0 auto;
    width: 150px;
   ;
}

<div class="imgtext">
    <img src="https://s14.postimg.org/u18a0yc1t/contact-1.jpg" alt="" />
    <p>**Image text** </p>
</div>

在Html5中，如何在其下方显示带有文本的图像链接

3 个答案: