Невозможно получить выравнивание по вертикали для работы с тегом img внутри списка

Question

Довольно простой вопрос - я не могу выровнять значок по вертикали внутри списка.

Мой CSS выглядит следующим образом:

#top_content img {
float: left;
}

#top_content ul {
float: right;
}

#top_content li img {
vertical-align: sub;

}

#top_content li {
list-style-type: none;
display: inline;
}

#top_content li a {
text-decoration: none;
color: #7aa807;
}

Мой HTML выглядит так:

<div id="top_content">
<ul>
<li><img src="../img/mail_ico.png" alt="#"><a href="#"><strong>(1 New)</strong></a></li>
</ul>
</div>

Есть идеи? Что я тут не так делаю?

Answer 1

Попробуйте добавить line-height к нему:

#top_content img {
  float: left;
  line-height:20px; /* adjust accordingly */
}

Answer 2

Ожидается, что выравнивание по вертикали будет работать должным образом :) В вашем случае можно было бы установить mail_ico.png как фоновое изображение на ? Вот как я работаю со случаями, когда вертикальное положение изображения важно в дизайне.

Answer 3

float: left в основном сводит на нет эффект vertical-align.vertical-align c контролирует выравнивание встроенного элемента с другими встроенными элементами в той же строке текста.float: left делает img блочным элементом, на который vertical-align не влияет.

Answer 4

Не float изображение.Это больше не будет inline поведением, вот что вызывает вашу проблему.