img 标签下方的 HTML 中心文本

标签 html css image href center

这是我的-

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

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

我想在 img 正下方显示“第一张图片”文本(这是一个链接)标签。我想因为我有 <a>作为父容器,文本应放在 <img> 下方但这并没有发生。

如何在图片下方居中显示文字?

最佳答案

应该这样做:

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

希望对您有所帮助。

关于img 标签下方的 HTML 中心文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12550491/

相关文章:

javascript - 如何根据页面大小调整按钮图标的大小

html - 包装 div 不接受图像高度

css - 为页面内容中的图像创建自定义布局 TYPO3 6

html - 如何将其中一个相机图像插入到 html 元素中——输入?

php - 借助数组和获取错误上传图像

javascript - 如何在 IE 中检测鼠标右键单击并按下鼠标左键?

html - 对齐输入框(名称)和提交按钮

javascript - 如何在页面调整大小时保持 div 可见?

html - 将图像与文本垂直对齐到底部

html - CSS 上简单模板的问题