img 标签下方的 HTML 中心文本答案

【问题标题】：HTML center text below img tagimg 标签下方的 HTML 中心文本
【发布时间】：2012-09-15 01:18:32
【问题描述】：

这就是我所拥有的-

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

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

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

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

【问题讨论】：

标签： html css image href center

【解决方案1】：

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

检查这个fiddle

【讨论】：

【解决方案2】：

应该这样做：

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

希望对你有帮助。

【讨论】：

【解决方案3】：

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

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

另外，你不需要结束图片标签，使用<img .. />

【讨论】：

【解决方案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>

【讨论】：

不应在内联元素 (a) 中使用块元素 (p)。