0

Помогите выровнять по вертикали контент верхнего меню. Использую bootstrap 3...

Пример

HTML

<nav class="navbar navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" href="#">
                        <img src="http://static2.wikia.nocookie.net/__cb20130816092518/despicableme/images/a/a7/DespicableMe.png" alt="Logo" class="navbar-logo">
                    </a>
                </div>

                <div class="collapse navbar-collapse navbar-right nav-list">
                    <ul class="nav navbar-nav">
                        <li><a class="nav-link">About</a></li>
                        <li><a class="nav-link">Our solution</a></li>
                        <li><a class="nav-link">Gallery</a></li>
                        <li>
                            <button type="button" class="btn navbar-btn">Play<i class="fa fa-facebook-square fa-2x"></i>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
</nav>

CSS

    .navbar {
   font-size: 18px;
   box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2);
   vertical-align: middle;
}

.navbar-brand {
  padding: 0;
  margin: 0;
}

.navbar-brand img {
  height: 100%;
  margin: 8px;
  display: block;
}

.nav-list a {
  margin-right: 1em;
}

.nav-list button {
  padding-left: 1em;
  padding-right: 1em;
  text-align: left;
  font-weight: bold;
  font-size: 18px;
}

.nav-list button i {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

button {
  background-color: green;
}

1 ответ 1

1

Добавить в css это в самый низ и будет так введите сюда описание изображения

.navbar-nav{
  display:flex;
  align-items:center;
}

1
  • Мне кажется или "Play" располагается немного выше чем пункты меню..То есть не на одной горизонтальной линии...Спасибо!
    – Slava PV
    2 мар 2018 в 0:59

Ваш ответ

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

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