vertically align к image с float

Рейтинг: 1Ответов: 1Опубликовано: 05.05.2015

Хочу чтобы в списке, слева от текста, была картинка расположенная по центру блока. Но свойство vertical-align: middle для картинки почему-то не работает и картинка прижимается к верху. 

<ul>
 <li>
  <a href="/test" class="menu-link">
   <img src="test.png">  
   <div>Много много всякого разного текста</div>
  </a>
 </li>
</ul>
<style>
 ul {width: 150px;}
 img {
  float: left;
  max-width: 40px;
  max-height: 30px;
  line-height: 38px;
  vertical-align: middle;
  }

  div {
  line-height: normal;
  color: rgb(244, 249, 226);
  padding-left: 47px;
  }
</style>
css
Источник: Stack Overflow на русском

Ответы

▲ 1

Как вариант - изображение можно задать с помощью псевдоэлементов :before or :after

http://jsfiddle.net/1y2p1sw3/

*{
    padding: 0;
    margin: 0;
}

ul{
    list-style: none;
    width: 150px;
}
ul > li{
    margin: 25px 0;
}
ul > li a{
    display: block;
    padding-left: 50px;
    position: relative;
    min-height: 36px;
}
ul > li a:before{
    content: '';
    position: absolute; top: 50%; left: 0;
    width: 36px;
    height: 36px;
    background: url('http://www.storemaven.com/images/home/downArrow.f4b9fa6f.png') no-repeat 0 0;
    margin-top: -18px;
}

ul > li a:hover{
    color: #f00;
}
<ul>
    <li>
        <a href="#">
            <p>«Вердер» продлил контракт с капитаном команды </p>
        </a>
    </li>
</ul>

Для вашего варианта без изменения структуры

http://jsfiddle.net/gormat2z/

*{
    padding: 0;
    margin: 0;
}

ul{
    list-style: none;
    width: 150px;
}
ul > li{
    padding-left: 47px;
    position: relative;
}
ul > li img {
  position: absolute; top: 50%; left: 0;
  width: 40px;
  height: 30px;
  margin-top: -15px;  
  }

  div {
  line-height: normal;
  color: rgb(244, 249, 226);  
  }
<ul>
 <li>
  <a href="/test" class="menu-link">
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQRiD5Nbe9PcWZor2zOH41EGJckNUwqVuy4nSyoFfqIprWn7-yXwQ" />  
   <div>Много много всякого разного текстаМного много всякого разного текста</div>
  </a>
 </li>
</ul>