Question

这就是我所拥有的 -

<a href="/mi/">
    <img id="i1" name="First" src="1.JPEG" onClick="return goto(this);"></img> 
    First Image 
</a>

我在模板的循环中使用这段代码，以像时尚一样在网格（图库）中显示一堆图像。我想在所有图像的下方显示一行标题。

我想在img标记的正下方显示“第一张图片”文字（这是一个链接）。我想，因为我将<a>作为父容器，所以文本应该放在<img>下面，但这不会发生。

如何在我的图像正下方显示文字？

Answer 1

这应该做：

<html>
    <head>
        <style>
            .imageLink{
                text-align:center;
            }
            .imageLink img{
                display:block;
            }
        </style>
    </head>
    <body>
        <a href="/mi/" class="imageLink">
            <img id="i1" name="First" src="1.JPEG" onClick="return goto(this);" /> 
            First Image 
        </a>
    </body>
</html>

希望它有所帮助。

Answer 2

text-align:center;和display:block;将执行此操作

检查此fiddle

Answer 3

使你的锚点成为一个块并将文本放在其中，然后将图像作为一个块，这样就会在文本上方产生换行符。

a { text-align: center; display: block; }
img { display: block; }

此外，您不需要关闭图片代码，请使用<img .. />

Answer 4

你可以用

包装文本

<p>First Image </p>

标签，这将解决问题;）

<a href="/mi/">
<img id="i1" name="First" src="1.JPEG" onClick="return goto(this);"></img> 
<p>First Image </p>
</a>

img标签下方的HTML中心文字

4 个答案: