Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите, почему стили применяются по разному? / 4 сообщений из 4, страница 1 из 1
25.06.2019, 14:35
    #39830365
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите, почему стили применяются по разному?
Есть такой фрагмент верстки:
Код: html
1.
2.
3.
4.
<div class="logo">
	<div class="logo-icon"><img src="logo-mini.png"></div>
	<div class="logo-text">Заголовок раздела</div>
</div>


И такие стили:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
.logo
{
	text-align: center;
}

.logo > [class*="logo-"]
{
	display: inline-block;
	vertical-align: middle;
	outline: 1px solid red;
}

.logo > .logo-text
{
	font-size: 80px;
}


В таком виде все выглядит нормально, все элементы центруются.
Но если vertical-align перенести в последний селектор (.logo > .logo-text), то текстовый блок выравнивается не по центру родительского блока, а сдвигается вниз.
Почему так? Разве два последних селектора не идентичны?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.06.2019, 16:09
    #39830411
OldMaster
OldMaster
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите, почему стили применяются по разному?
Потому что vertical-align: middle вне ячейки таблицы задает выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
авторРазве два последних селектора не идентичны?
Аналогичными селекторы будут, если вы напишите вместо
Код: css
1.
2.
3.
.logo > [class*="logo-"]{
	vertical-align: middle;
}


правила для всех элементов
Код: css
1.
2.
3.
4.
5.
6.
.logo > .logo-text{
	vertical-align: middle;
}
.logo > .logo-icon{
	vertical-align: middle;
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.06.2019, 09:53
    #39831478
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите, почему стили применяются по разному?
Так селектор class*="logo-" включает в себя .logo-icon и .logo-text, так что оба варианта равнозначны.
Как я понял, дело не в самих селекторах, а в том, что vertical-align должен быть указан у всех дочерних элементов, чтобы они правильно отцентровались. Если для .logo-icon vertical-align не задавать, то его виртуальная линия выравнивания будет идти по нижненй границе, то есть это не .logo-text сдвигался вниз, а .logo-icon "распирал" родителя вверх.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.06.2019, 10:08
    #39831483
OldMaster
OldMaster
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите, почему стили применяются по разному?
Да, я об этом и говорю.
Если хотите заменить .logo > [class*="logo-"], то нужно создавать правила и для .logo > .logo-text, и для .logo > .logo-icon.
А еще лучше, вместо vertical-align, в подобных случаях использовать flexbox.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите, почему стили применяются по разному? / 4 сообщений из 4, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 394ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1443737]:
 0ms
get settings:
 11ms
get forum list:
 12ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 58ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 50ms
get tp. blocked users:
 2ms
others: 239ms
total:  394ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]