Флажок html отображается под тегом h2
У меня есть флажок HTML с h2 внутри того же div
h2.childcares {
font-family: Source Sans;
color: black;
background-color: #ff9f01;
display: inline;
padding: 5px;
border: 1px solid blue;
border-radius: 15px;
}<div class = "custom-control custom-checkbox">
<input type = "checkbox" class = "custom-control-input" id = "childcares" unchecked>
<label class = "custom-control-label" for = "childcares"></label>
<h2 class = "childcares">Childcares</h2>
</div>это дисплей
Я хочу, чтобы флажок был центрирован тегом h2
@ IvanS95 - спасибо, что поместили это во фрагмент. Когда я запускаю его в Chrome, я вижу, что флажок находится немного ниже центра. Однако я начинаю думать, что, возможно, не понимаю, каков желаемый результат ziggy, о чем свидетельствует наше обсуждение ниже.
@AlexanderNied, если это проблема с Chrome, я приму ваш ответ ниже. потому что ваше предложение vertical-align: middle подняло флажок
Ответы 2
Я бы сказал, дайте всем детям стиль vertical-align: middle:
h2.childcares {
font-family: Source Sans;
color: black;
background-color: #ff9f01;
display: inline;
padding: 5px;
border: 1px solid blue;
border-radius: 15px;
}
.custom-control-label,
.custom-control-input,
.childcares {
vertical-align: middle;
}<div class = "custom-control custom-checkbox">
<input type = "checkbox" class = "custom-control-input" id = "childcares" unchecked>
<label class = "custom-control-label" for = "childcares"></label>
<h2 class = "childcares">Childcares</h2>
</div>также относится ли .childcares к идентификатору флажка или к классу тега h2? (новичок в css здесь)
@ziggy .childcares относится к классу, #childcares относится к идентификатору :)
Точка (.) перед значением указывает, что это класс; решетка (#), предшествующая значению, указывает идентификатор. Что касается дисплея, возможно, я неправильно понимаю ваше намерение. Когда я запускаю это в Chrome, все элементы выровнены по центру относительно горизонтальной оси. Разве это не желаемый результат?
Это и мое мнение; запуск кода при условии, что он действительно показывает элементы, правильно выровненные по середине; Я думаю, что могут быть какие-то другие стили, вызывающие проблему
хорошо, этот код является частью другого div, но я не думал, что это повлияет на это. поэтому я обновлю код, потому что один только этот фрагмент кода работает нормально.
ваш код правильно выравнивает флажок посередине, у вас может быть проблема с кешем. В любом случае, если вы хотите, чтобы он был установлен посередине, вы можете добавить это единственное свойство в свой css, и ваше выравнивание флажка будет заблокировано.
h2.childcares {
vertical-align: baseline;
}
пожалуйста, перейдите по этой ссылке ниже, она объясняет более четко выравнивание свойства флажка
Запустив предоставленный вами код как есть, все выглядит хорошо; может быть, есть что-то еще, вызывающее проблему? Можете ли вы проверить с помощью DevTools, есть ли там дополнительные поля или отступы?