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

Solution 1:

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

<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 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 image 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