Почему этот жирный текст не соответствует CSS вертикального выравнивания: средний

0

У меня есть куча текста и изображений в строке, и я хочу выровнять по вертикали. Кажется, что все работает, за исключением того, что я просто добавил полужирный текст, и полужирный текст кажется немного ниже обычного текста.

вот скриншот:

Изображение 174551

вот простой вид моего html:

<span class="midAlign">
    Filter: [<b>Apps: </b>My App Name ]
</span>

вот мой css:

  .midAlign * {vertical-align: middle;}

если я удаляю жирный тег, он выглядит правильно:

Изображение 174551

  • 1
    Возможно, к этому тегу <b> применен какой-то дополнительный CSS?
  • 0
    Я смотрел в Firebug, и я не вижу никаких других CSS в игре
Показать ещё 5 комментариев
Теги:
vertical-alignment

2 ответа

2
Лучший ответ

У меня есть куча текста и изображений в строке

Поэтому, когда вы используете .midAlign * это применимо ко всем элементам, так что лицо вам не нужно применять это свойство ко всем элементам, вам нужно, чтобы для img только так использовать

.midAlign img {
   vertical-align: middle;
}

И это решит проблему.

Demo

Кроме того, когда вы используете селектор *, он влияет на производительность, вы используете это без уважительной причины для этого конкретного случая.


Я объясню вам, почему это произошло. b и img оба являются встроенными элементами, поэтому, когда вы применяете vertical-align: middle; он выравнивает элемент к базовой линии, поэтому скажем, что у нас есть тег img и b, поэтому b будет вертикально выровнен по середине, учитывая всю высоту элемента... см. это

Изображение 174551


Поэтому, когда вы используете middle значение как значение, оно среднее, но для всей высоты элемента, а не только для вашего текста

Изображение 174551

Demo

Таким образом, технически ваш тег b был выровнен по центру по вертикали, но просто вам не нужно выровнять его, поэтому используйте селектор специальных селекторов вместо обобщенного селектора *.

3

Проблема в том, что .midAlign * применяется только к элементу <b>. Просто удаление * решает проблему.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню