如何将文本放在菜单中的 img 图标下

Question

我正在尝试制作一个看起来像这个 http://i.imgur.com/mWbEYhD.png 的菜单。

但我最终得到了像这样的菜单 http://i.imgur.com/DDeEyBr.png。

我该如何解决这个问题？

.HTML

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

.CSS

.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;
    }

Answer 1

用<p>或<span>等将文本包装回家。<p>Home</p>并给它position:absolute;，并使用position:relative;来<a>

参见 JSFIDDLE 链接

Answer 2

试试这个。将<br>放在 src 和文本之间。您的代码将如下所示。

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

Answer 3

把你的文本放在像<p style="position:absolute">Home</p>这样的<p>，并使用位置：相对; 链接<a>link Name</a>