HTML and CSS3 Menu Questions

Question

Thanks for reading my question.

I still have a lot to learn about HTML and CSS, but I'm trying. However, this led me to a problem (I searched a bit, but did not find a good answer):

I want to make the menu at the top of my page as a title. However, in the middle of this menu there is an image, like a logo. If you did not get them next to each other correctly, I used them in the list

<div class="wrap_header"> <ul> <li><a href="#">MENU ITEM 1</a></li> <li><a href="#">MENU ITEM 2</a></li> <li id="header logo"><img src="the image"></li> <li><a href="#">MENU ITEM 3</a></li> <li><a href="#">MENU ITEM 4</a></li> </ul> </div><!--END wrap_header--> 

Here I am stuck: - I want the “MENU ITEM 1-4” to be almost in the middle (height) of the image. However, the image should remain if it were (so be in the center, just below). If possible, the opportunity to change their position, if necessary. - I want the “MENU ITEM 1-4” to be underlined by a 2x high color line, not sure how to do it. It should look something like this:

 empty space THE IMAGE MENU ITEM 1 MENU ITEM 2 THE IMAGE MENU ITEM 3 MENU ITEM 4 empty space THE IMAGE 

Answer 1

I am not sure if I understood this question. But I would answer:

 <div class="wrap_header"> <ul> <li><a href="#">MENU ITEM 1</a></li> <li><a href="#">MENU ITEM 2</a></li> <li id="header_logo"><img src="http://www.prskelet.com/images/logotip.jpg"/></li> <li><a href="#">MENU ITEM 3</a></li> <li><a href="#">MENU ITEM 4</a></li> </ul> </div><!--END wrap_header--> 

And configure it like this:

  ul li{ margin-right:20px; line-height:200px; float:left; } ul li img{ height:200px; width:auto; } ul li a { text-decoration:none; border-bottom:2px solid red; } 

You need to set the line height equal to the height of the image, and then vertically align it. To emphasize the text with the selected color, you need to add border-bottom . Here you can see jsFiddle