Pregunta

everyone. Been searching for this for some time, but i cant find an answer..

What i want is, have a header with links, that can have image, text and image with text after it, and align them horizontaly..

The problem is, that the text is allways fushed down by the image after it..

.header_wrap {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    border-bottom: solid 1px grey;
    background: black;
  }
  .header_wrap ul {
    margin: 0;
    list-style: none;
  }
  .header_wrap ul li {
    display: inline-block;
  }
  .header_wrap ul li a {
    display: block;
    padding: 0 5px;
    text-decoration: none;
    height: 50px;
    color: white;
  }
  .header_wrap ul li a span {
    padding: 0 0 0 8px;
  }
  .header_wrap ul li a img {
    vertical-align: middle;
    padding: 3px 0 0 0;
    width: 45px;
    height: 45px;
  }
  .header_wrap ul li a:hover {
    background: grey;
  }


 <div class="header_wrap">
  <ul>
    <li class="img"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/></a></li>
    <li class="img_txt"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/><span>Link</span></a></li>
    <li class="txt"><a href="#">link</a></li>
    <li class="img"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/></a></li>
    <li class="img_txt"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/><span>Link</span></a></li>
    <li class="txt"><a href="#">link</a></li>
  </ul>
</div>

Here is the code:

http://jsfiddle.net/fAFZ9/

What i want is, to have a hover on the "text only link" to be the same as on other links.. That is, aligned to top of the menu and have the text centered..

Hope, someone will be able to help me with this..

¿Fue útil?

Solución

simply add

line-height: 45px;

to the li element: http://jsfiddle.net/fAFZ9/1/

Otros consejos

Add display: table-cell; vertical-align: middle; to your .header_wrap ul li a

demo

I have updated your CSS in fiddle http://jsfiddle.net/fAFZ9/6/ . Its perfect now ;)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top