ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите, почему стили применяются по разному?
4 сообщений из 4, страница 1 из 1
Подскажите, почему стили применяются по разному?
    #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, 14:35
| Ответить | Цитировать | Написать  
Подскажите, почему стили применяются по разному?
    #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
25.06.2019, 16:09
| Ответить | Цитировать | Написать  
Подскажите, почему стили применяются по разному?
    #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, 09:53
| Ответить | Цитировать | Написать  
Подскажите, почему стили применяются по разному?
    #39831483
OldMaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
OldMaster
Гость
Да, я об этом и говорю.
Если хотите заменить .logo > [class*="logo-"], то нужно создавать правила и для .logo > .logo-text, и для .logo > .logo-icon.
А еще лучше, вместо vertical-align, в подобных случаях использовать flexbox.
...
Рейтинг: 0 / 0
28.06.2019, 10:08
| Ответить | Цитировать | Написать  
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите, почему стили применяются по разному?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39831483&tid=1443737]:
 0ms
get settings:
 11ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 63ms
get topic data:
 14ms
get forum data:
 3ms
get page messages:
 50ms
get tp. blocked users:
 2ms
others: 14ms
total:  180ms
созд. / загр.: 180ms
x
x
Закрыть


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