我如何將文本放在菜單下的img圖標下？

我試圖製作一個看起來像這樣的菜單http://i.imgur.com/mWbEYhD.png。我如何將文本放在菜單下的img圖標下？

但我最終得到一個像這樣的菜單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; 
    }

來源

2014-10-27 Athax

請添加小提琴來糾正 – Tushar 2014-10-27 11:05:10

我不確定你的意思是小提琴。 – Athax 2014-10-27 11:10:25

在JSFIDDLE.net中添加一些東西，使其具有可編輯的工作演示。去JSFIDDLE.net – Tushar 2014-10-27 11:15:40

包裝你的文字家裏<p>或<span>等。 <p>Home</p>，並給它position:absolute;並使用position:relative;到<a>

see jsfiddle link

來源

2014-10-27 11:26:23 Rasel

感謝隊友，它的工作！ – Athax 2014-10-27 11:31:47

試試這個。把<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>

來源

2014-10-27 11:23:21

我已經嘗試過，但是然後發生這種情況http://jsfiddle.net/Lw6axfb2/9/ – Athax 2014-10-27 11:27:36

只是等待我會嘗試它，並很快重播 – 2014-10-27 11:31:48

把你的文家中<p>像<p style="position:absolute">Home</p>和使用的位置是：相對的;鏈接<a>link Name</a>

來源

2014-10-27 11:49:15

我如何將文本放在菜單下的img圖標下？

回答

相關問題