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

Question

[Nikita_Migushev]

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



Ссылка 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;
}

Answer 1

[Yustas Alexu]

Попробуйте так:

.flex-inner li {
  display: flex;
  align-items: center;
}

Comments

[Nikita_Migushev]

Спасибо, но не помогает...

[Yustas Alexu]

Nikita_Migushev, а мне помогло:

[Yustas Alexu]

может там margin какой есть у инпута или лейбла? Если есть нужно убрать.

[Nikita_Migushev]

Yustas Alexu, да, верно. Был margin top лишний. Спасибо

Answer 2

[Ibishka]

.flex-inner li {
display: flex;
align-items : center;
}

Answer 3

[Nikita Panuhin]

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;
}