Html 如何在菜单中的img图标下放置文本？

我正试着做一份这样的菜单

但我最终得到了一份像这样的菜单

我该如何解决这个问题

HTML

试试这个。 将

放在src和文本之间。 您的代码将如下所示

TecQ

---

用

或
等将文本打包回家。
回家
并给它
位置：绝对并使用
位置：相对
到
将文本放在
中，就像
home一样，并使用position:relative；要链接
链接名称
，请添加一个提琴，我不确定你所说的提琴是什么意思。请在JSFIDDLE.net中添加一些东西，以获得一个可编辑的工作演示。转到JSFIDLE。net@TusharGupta没有必要在每个问题上都贴上一个提琴（www.jsfiddle.net），特别是代码已经正确地包含在内，这是一项要求。但是给你。。我已经更新了它，让它看起来更像菜单：等一下，我会尝试一下，然后很快重播
<header>
            <div id="logo">
                <h1>TecQ</h1>
            </div>
            <nav class="prime-menu">
                <ul>
                    <li><a class="on" href="index.html"><img src="img/icons/home.png">Home</a></li>
                    <li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
                    <li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
                    <li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
                </ul>
            </nav>
        </header>

.prime-menu ul {
    list-style: none;
    }

.prime-menu ul li {
    margin-top: 2px;
    display: inline-block;
    }

.prime-menu ul li a{
    width: 140px;
    height: 140px;
    display: inline-block;
    font-size: 20px;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    background: #15161c;
    font-size: 12px;
    line-height: 140px; 
    }

.prime-menu ul li a img{
    }

.prime-menu ul li a:hover {
    background: #1c1d25;
    font-weight: 400;
    }