Aligning element at center strange issue

Question

http://jsfiddle.net/ritz/7YTbH/1/ Hello, I´m having a issue align an element. I want to align the text "Menu" taking into accout my

elements, but What is happening is that the text "Menu" is aligning taking account into my span . I already try to give a element to my "Menu" text but I´m not having sucess with this method. Can you give some little help so I can see the light?

My jsfiddle with the issue:

http://jsfiddle.net/ritz/7YTbH/1/

My html:

<nav id="menu-topics-container">
    <div id="menu-topics">
         <div id="demo">
          <h4>
            <span>
                <img src="menu-alt.png">
             </span>
             Home
          </h4>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contacts</a></li>          
          </ul>
        </div>
    </div>
</nav>

My css:

 *{margin:0; padding:0; border:none;}
 body{background:#fff; font-family:'arial'; min-width:320px;}
 #menu-topics-container{width:100%; height:auto; line-height:40px; background-color:#1A252B;float:left;}
 #menu-topics{width:320px; height:40px; line-height:40px; margin:0 auto 0 auto;}
 #menu-topics span img{margin-left:5px;}
 #menu-topics h4{width:320px; font-family:'arial'; font-size:16px; line-height:40px; height:40px; text-align:center;color:#fff; text-decoration:none; margin-top:2px;}
 #menu-topics h4  a{text-decoration:none; color:#fff; background:#FF0;}
 #menu-topics h4 span{float:left; line-height:52px; height:36px; margin-top:4px;}
 #menu-topics  ul {list-style-type:none; }
 #menu-categorias  ul li{width:320px; height:36px; line-height:36px; background:#333; color:#fff;margin:0; float:left; font-family:'arial';border-bottom:1px solid #fff;}
 #menu-topics  ul li a {width:320px; height:36px; line-height:36px; background:#333; color:#fff; display:block; text-align:center; text-decoration:none; float:left; margin:0;}

Upvotes: 0

Views: 41

Answer 1

Add position: relative to your H4, and then add position: absolute to your span, and position it with left and top, relative to the H4 that contains it.