@Nikita_Migushev

Как выровнять checkbox и label?

Подскажите, как сделать, чтобы чекбоксы были по центру по вертикали относитньно label.
vertical-align: middle не помогает.

5e0e2bd498c3b359145696.jpeg

Ссылка JSFiddle

HTML
<ul class="flex-inner">
                    <li>
                        <input type="checkbox">
                        <label for="">Fire Cabins</label>
                    </li>
                    <li>
                        <input type="checkbox">
                        <label for="">Horseshoe Cabins</label>
                    </li>
                    <li>
                        <input type="checkbox">
                        <label for="">Spruce Cabins</label>
                    </li>
                    <li>
                        <input type="checkbox">
                        <label for="">Ursa Major Cabins</label>
                    </li>
                    <li>
                        <input type="checkbox">
                        <label for="">Bear Meadow Campground</label>
                    </li>
                    <li>
                        <input type="checkbox">
                        <label for="">Lakeside Campground</label>
                    </li>
                    <li>
                        <input type="checkbox">
                        <label for="">Leadfoot Campground</label>
                    </li>
                    <li>
                        <input type="checkbox">
                        <label for="">Talus Campground</label>
                    </li>
                    </ul>


CSS
.flex-inner {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.flex-inner li {
  margin-top: 10px;
}

.flex-inner {
    flex-direction: column;
}

.flex-inner > li > label {
    margin-left: 10px;
}

.flex-inner>li>input {
    cursor: pointer;
}
  • Вопрос задан
  • 6714 просмотров
Решения вопроса 3
Попробуйте так:
.flex-inner li {
  display: flex;
  align-items: center;
}
Ответ написан
@Ibishka
.flex-inner li {
display: flex;
align-items : center;
}
Ответ написан
Комментировать
npanuhin
@npanuhin
https://jsfiddle.net/j0wdupnf/7/

position: relative и top: ???px

.flex-inner > li > label {
  margin-left: 10px;
  line-height: 50px;
}

.flex-inner > li > input {
  position: relative;
  top: 1.6px;
  cursor: pointer;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы