HTML CSS Navigation Menu positioning text and images

Question

I am trying to create a I am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create a

HTML

<div id="pageTop"> 
    <nav>
        <ul>
            <li><a href="apps/fade-ifit.html"> <img src="images/search.png" alt="" class="headerCon" /> <navText> Home </navText> </a> </li>

        </ul>
    </nav>
</div>

CSS

nav > ul > li > a {
    color: #aaa;

}



nav > ul > li > div ul > li {
    display: block;
}

score 3 · Accepted Answer · edited May 23 '17 at 11:57

You can make the <img> elements block elements and center them using an auto margin.

ul img {
    display : block;
    margin  : 0 auto;
}

Another would be to use background images along with a background position:

ul li.home {
    background-image    : url(...);
    background-position : center;
}

You will probably also want to remove the spaces between the <li> elements. I like doing this by omitting the optional closing tags so you would have:

<ul>
    <li><a href=...><img src=... />Item 1
    <li><a href=...><img src=... />Item 2
    ...
</ul>

Other options for removing spaces can be found here: How to remove the space between list items

Edit: JSFiddle added with a stripped down version to show how this could work.

I added a simplified JSFiddle. Let me know if this doesn’t cover what you need of if there is something specific that I’m missing. — Erik J. Sturcke, Mar 09 '14 at 03:25

score 0 · Answer 2 · answered Mar 08 '14 at 05:39

0

just put a line break in the <li>

   <li><a href="..."> <img src="..." class="headerCon" /> <br/>
        <navText> Home </navText> </a> 
   </li>

I would take out the <navText> too, that's not valid HTML

   <li><a href="..."> <img src="..." class="headerCon" /> <br/>
        Home </a> 
   </li>

answered Mar 08 '14 at 05:39

Scott Selby

9,420
12
57
96

Maybe instead of you can wrap the text in a div
– gelolopez Mar 08 '14 at 06:02

HTML CSS Navigation Menu positioning text and images

2 Answers2