У меня есть куча текста и изображений в строке, и я хочу выровнять по вертикали. Кажется, что все работает, за исключением того, что я просто добавил полужирный текст, и полужирный текст кажется немного ниже обычного текста.
вот скриншот:
вот простой вид моего html:
<span class="midAlign">
Filter: [<b>Apps: </b>My App Name ]
</span>
вот мой css:
.midAlign * {vertical-align: middle;}
если я удаляю жирный тег, он выглядит правильно:
У меня есть куча текста и изображений в строке
Поэтому, когда вы используете .midAlign *
это применимо ко всем элементам, так что лицо вам не нужно применять это свойство ко всем элементам, вам нужно, чтобы для img
только так использовать
.midAlign img {
vertical-align: middle;
}
И это решит проблему.
Кроме того, когда вы используете селектор *
, он влияет на производительность, вы используете это без уважительной причины для этого конкретного случая.
Я объясню вам, почему это произошло. b
и img
оба являются встроенными элементами, поэтому, когда вы применяете vertical-align: middle;
он выравнивает элемент к базовой линии, поэтому скажем, что у нас есть тег img
и b
, поэтому b
будет вертикально выровнен по середине, учитывая всю высоту элемента... см. это
Поэтому, когда вы используете middle
значение как значение, оно среднее, но для всей высоты элемента, а не только для вашего текста
Таким образом, технически ваш тег b
был выровнен по центру по вертикали, но просто вам не нужно выровнять его, поэтому используйте селектор специальных селекторов вместо обобщенного селектора *
.
Проблема в том, что .midAlign *
применяется только к элементу <b>
. Просто удаление *
решает проблему.