3

.header {
  margin: 60px 0;
}

.header__form {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
<div class="container">
  <header class="header">
    <div class="row">
      <div class="col">
        <img src="http://vignette3.wikia.nocookie.net/childoflight/images/1/19/%D0%9B%D0%BE%D0%B3%D0%BE_Steam.png/revision/latest?cb=20160320085501&path-prefix=ru" alt="Logo" class="header__logo">
      </div>
      <div class="col">
        <form action="" class="header__form">
          <input type="search" class="header__search">
        </form>
      </div>
    </div>
  </header>
</div>

Почему не работает вертикальное выравнивание?

1 ответ 1

3

Попробуйте обернуть ваши блоки в flex контейнер так:

.header {
  margin: 60px 0;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
<div class="container">
    <header class="header">
        <div class="row flex-container">
            <div class="col">
                <img src="http://vignette3.wikia.nocookie.net/childoflight/images/1/19/%D0%9B%D0%BE%D0%B3%D0%BE_Steam.png/revision/latest?cb=20160320085501&path-prefix=ru" alt="Logo" class="header__logo">
            </div>
            <div class="col">
                <form action="" class="header__form">
                    <input type="search" class="header__search">
                </form>
            </div>
        </div>
    </header>
</div>

Так же рекомендую освежить теорию по flex

1
  • 1
    Спасибо, не додумался) 14 авг 2017 в 18:58

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.