html - How do i put text under an img icon in a menu? -


I'm trying to create a menu that looks like this.

But I have a

HTML 

  & lt; Header & gt; & Lt; Div id = "logo" & gt; & Lt; H1 & gt; TecQ & lt; / H1> & Lt; / Div & gt; & Lt; Nav class = "prime-menu" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A class = "at" href = "index.html" & gt; & Lt; Img src = "img / icons / home.png" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A class = "at" href = "index.html" & gt; & Lt; Img src = "img / icons / home.png" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A class = "at" href = "index.html" & gt; & Lt; Img src = "img / icons / home.png" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A class = "at" href = "index.html" & gt; & Lt; Img src = "img / icons / home.png" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; & Lt; / Header & gt;

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 img {} .prime-menu ul li: hover {background: # 1c1d25; Font-weight: 400;    
 
 
 Change your text to  & lt; P & gt;   & lt; Span & gt;  etc.  & lt; P & gt; Home & lt; / P & gt;  and it is  condition: complete; Enter  and use the  position: relative;  to   A & gt;

Comments

Post a Comment