HTML and CSS3 menu questions

Thank you for reading my question.

I still have a lot to learn regarding HTML and CSS, yet I'm trying. However, this brought me to a problem (I searched around a bit, but couldn't find a good answer):

I want to make a menu on the top of my page, as header. However, in the middle of this menu there is an image, as logo.
Failing to get them next to each other correctly, I used them in a list

    
MENU ITEM 1
    
MENU ITEM 2
    
 
    
MENU ITEM 3
    
MENU ITEM 4

Here I'm stuck:
- I want the 'MENU ITEM 1-4' to be almost at the middle(height) of the%20image. However the%20image has to stay were it is(so be at the very center, just at the bottom). If possible being able to change its position too if needed.
- I want the 'MENU ITEM 1-4' to be underlined by a 2px high,colored line, not sure how to do that.
It'll have to 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

Problem courtesy of: Pepe

Solution

I'm not sure whether I understood the question. But to my answer would be:

    
MENU ITEM 1
    
MENU ITEM 2
    
 
    
MENU ITEM 3
    
MENU ITEM 4

And style it like so:

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 put line height equal to the%20image height and then vertically align it. To underline text with a color you chose you will need to add border-bottom
.
Here you can see jsFiddle

Solution courtesy of: dinodsaurus