1

Элементы стоят в одну строку. Нужно выровнять меню так, что бы оно всегда оставалось ровно по-середине страницы. Вот ПРИМЕР

.box_navbar_collapse {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-nav {
  display: flex;
  align-items: center;
  list-style: none;
  flex: 1;
}
.navbar-nav >li {
  margin: 0 10px;
}
.box_tell>p {
  margin: 5px 0;
}
.text-center {
  text-align: center;
}
.box_tell {
  margin-left: 20px;
}
<div class="box_navbar_collapse">
  <a class="navbar-brand" href="#">
    <img src="img/index/logo.png" alt="">
  </a>
  <ul class="nav navbar-nav">
    <li>
      <a href="#">text</a>
    </li>
    <li>
      <a href="#">text</a>
    </li>
    <li>
      <a href="#">text</a>
    </li>
  </ul>
  <button class="btn">кнопка</button>
  <div class="box_tell">
    <p>(097) 948-61-83</p>
    <p>(095) 836-90-32</p>
  </div>
</div>
<div class="text-center">
  <span>|</span>
</div>
<div class="text-center">
  <span>center</span>
</div>

1
  • .navbar-nav { display: flex; align-items: center; align-content: center; justify-content: center;}
    – SVE
    29 сен 2016 в 11:52

2 ответа 2

1

Сделал пример и обновил твой JSFidlle:

HTML:

<div class="box_navbar_collapse">
    <a class="navbar-brand" href="#">
      <img src="https://upload.wikimedia.org/wikipedia/en/2/25/MOT_Approved_Test_station_symbol.png" alt="MY-LOGO">
    </a>

  <ul class="nav navbar-nav">
     <li> <a href="#">Меню 1</a> </li>
     <li> <a href="#">Меню 2</a> </li>
     <li> <a href="#">Меню 3</a> </li>
     <li> <a href="#">Меню 4</a> </li>
     <li> <a href="#">Меню 5</a> </li>
  </ul>

  <button class="btn">кнопка</button>
  <div class="box_tell">
    <p>(097) 948-61-83</p>
    <p>(095) 836-90-32</p>
  </div>
</div><!-- .box_navbar_collapse -->

<div class="text-center">
  <span>|</span>
</div>
<div class="text-center">
  <span>center</span>
</div>

CSS:

div, p, ul, li, a, span, img {
  box-sizing: border-box;
  padding:  0;
  margin:   0; }

.box_navbar_collapse{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:center;
  align-items: stretch;
  background-color: #999;
  align-content: stretch;
  oveflow: hidden;
  width: 100%; }

a.navbar-brand {
  width:10%;
  display: block;
  background-color: #f99;
  overflow: hidden; }

a.navbar-brand img {
  display:block;
  width:100%;
  max-height:100%;
  margin: 0 auto; }

.navbar-nav{
  width: 65%;
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  justify-content: center;
  background-color: #FF9600;
  overflow: hidden;}

.navbar-nav li {
  display: block;
  list-style: none;
  width: 50%; }

.navbar-nav li:not(:last-child){
  border-right: 1px solid #333;}

.navbar-nav li a{
  padding: 10px;
  display: block;
  text-align: center;
}

.btn {
  background-color: #184129;
  border: none;
  width: 10%;
  display: block; }

.box_tell {
  background-color: #403427;
  width: 15%;
  display: block;
}

.text-center {
  display: block;
  width: 200px;
  background-color: #1B5D42;
  margin: 0px auto;
  text-align: center;
}

Вот JSFiddle.

Всё стили которые ненадо, можешь удалить. Я так, чисто для наглядности. Больше про flexbox можна почитать тут.

3
  • Ваш пример немного не то, что я хотел. В вашем случае пункт меню 3 должен стоять напротив метки "center" при любом разрешении . Я так понимаю что ширина для левого logo и ширина кнопки с телефонами должны быть одинаковы. Тогда меню останется по середине. пример
    – Raz-Dva
    30 сен 2016 в 6:33
  • @Raz-Dva Метка center в любом разрешении будет находиться ровно по центру страницы. Можете объяснить что именно надо, сейчас переделаю
    – Rosnowsky
    30 сен 2016 в 6:38
  • вот ПРИМЕР здесь центр меню всегда совпадает с центром страницы. Я хотел это сделать без фиксированой ширины элементов
    – Raz-Dva
    30 сен 2016 в 7:17
0

Очень удобно для Flex использовать Bootstrap, где все можно сделать через предустановленные классы.

Вот раздел документации http://bootstrap-4.ru/docs/4.2.1/utilities/flex/

4
  • что может быть хуже бутстрап
    – muturgan
    30 янв 2019 в 14:39
  • кто-то любит писать на чистoм коде, изобретая велосипед и наступая на старые грабли, а кто-то пользуется front-end и собирает свою идею из уже готовых "кубиков". Я лишь предложил простой и надежный вариант. Использовать его или нагромождать кучей кода страницу - выбор у каждого свой ;-)
    – velo
    30 янв 2019 в 14:56
  • спору нет, сделать приложение быстрым, или увеличить размер бандла и раздуть дом-дерево ненужными распорками - выбор у каждого свой ;-)
    – muturgan
    30 янв 2019 в 14:59
  • исключительно дружеское и дружелюбное препирательство)
    – muturgan
    30 янв 2019 в 15:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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