我如何将文本放在菜单下的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图标下？

回答

相关问题