2

这是我所拥有的 -

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

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

我想在img标签正下方显示“第一张图片”文本（这是一个链接）。我想既然我有<a>作为父容器的文本应该放在下面，<img>但这并没有发生。

如何在图像正下方居中显示文本？

4

4 回答 4

7

这应该这样做：

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

希望能帮助到你。

于 2012-09-23T07:22:24.457 回答
2

text-align:center;并且display:block; 会这样做

检查这个小提琴

于 2012-09-23T07:22:09.607 回答
2

将您的锚点设为块并在其中居中文本，然后将图像设为块，以便在文本上方产生换行符。

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

此外，您不需要结束图像标签，使用<img .. />

于 2012-09-23T07:22:54.177 回答
-1

你可以用

<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>
于 2012-09-23T07:32:29.710 回答