Как выровнять ссылки по центру?

Question

[hzhzhz124]

Подскажите, пожалуйста, как выровнять ссылки по центру страницы с помощью css.
Если ширина экрана больше 1200 px, то отображается нормально. Если меньше 1200 px, то ссылки: "отзывы", "Информация", "Контакты", "Статьи", Корзина смещаются вниз (как бы на одну строку). Нужно эти ссылки выровнять по центру, и что бы выпадающие пункты тоже работали.

Answer 1

[twentytvvo]

<!-- Новый блок -->
  <nav id="top" class="navbar navbar-default navbar-full">
    <div class="container">
<div>
      <div class="navbar-header">
      <div id="logo">
                                                  <a href="https://procraft.com.ua/"><img src="https://procraft.com.ua/image/catalog/main/logo_procraft.jpg" title="Procraft" alt="Procraft" /></a>
                                            </div> 
      </div>
 <ul class="nav navbar-nav">
          <li class="dropdown" id="contacts">
            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-mobile"></i> <span class="phone">098 187 4958 | 050 399 2808 | 093 170 5641</span> <span class="hidden-sm"> </span><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu">
                                                                      <li class="dropdown-header keep-open">Телефоны</li>
                                                                                                  <li class="keep-open"><a target="_blank" href="tel:[phone]"><i class="fa fa-lg fa-fw fa-phone"></i> 098 187 4958</a></li>
                                                                                                                <li class="keep-open"><a target="_blank" href="tel:[phone]"><i class="fa fa-lg fa-fw fa-phone"></i> 050 399 2808</a></li>
                                                                                                                <li class="keep-open"><a target="_blank" href="tel:[phone]"><i class="fa fa-lg fa-fw fa-phone"></i> 093 170 5641</a></li>
                                                                    </ul>
                      </li>
                  </ul>
      </div>
      <div class="collapse navbar-collapse navbar-top-collapse">
       
        <ul class="nav navbar-nav navbar-right">
                                              <li><a target="_blank" href="all-feedback-procraft/"><i class="fa fa-fw fa-comment-o"></i> Отзывы</a></li>
                                                                                                          <li class="dropdown">
                  <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa--"></i> Информация <i class="fa fa-angle-down"></i></a>
                  <ul class="dropdown-menu dropdown-menu-left">
                                          <li><a href="garantija-i-servis-procraft/">Гарантия и сервис</a></li>
                                          <li><a href="oplata-i-dostavka-procraft/">Оплата и доставка</a></li>
                                      </ul>
                </li>
                                                              <li><a target="_blank" href="contacts-procraft/"><i class="fa fa-fw fa--"></i> Контакты</a></li>
                                                <li><a target="_blank" href="statyi-procraft"><i class="fa fa-fw fa--"></i> Статьи</a></li>
                                
                    <li class="dropdown" id="cart">
  <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" data-loading-text="Загрузка..." role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-fw fa-shopping-cart"></i><small class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><span class="fa-stack-1x">0</span></small> <span class="hidden-sm"><span id="cart-total">0 грн</span> <i class="fa fa-angle-down"></i></span></a>
  <ul class="dropdown-menu keep-open">
        <li>
              <p class="text-center">В корзине пусто!</p>
          </li>
      </ul>
</li>
                              
          <li class="dropdown" id="top-links">
            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-bars"></i> <span class="hidden-lg hidden-md hidden-sm">Меню <i class="fa fa-angle-down"></i></span></a>
            <ul class="dropdown-menu keep-open">
                            <li>
  <form action="https://procraft.com.ua/index.php?route=common/language/language" method="post" enctype="multipart/form-data" id="form-language">
    <ul class="dropdown-menu">
      <li class="dropdown-header">Язык</li>
      <li class="hidden">
        <input type="hidden" name="code" value="" />
        <input type="hidden" name="redirect" value="https://procraft.com.ua/" />
      </li>
            <li class="active"><a href="javascript:void(0);" class="language-select" onclick="$('input[name=\'code\']').val('ru-ru'); $('#form-language').submit();">Русский</a></li>
            <li ><a href="javascript:void(0);" class="language-select" onclick="$('input[name=\'code\']').val('uk-ua'); $('#form-language').submit();">Українська</a></li>
          </ul>
  </form>
</li>
<li role="separator" class="divider clearfix"></li>
                                          <li class="dropdown-header">Личный кабинет</li>
              <li><a href="https://procraft.com.ua/login/" rel="nofollow"><i class="fa fa-fw fa-sign-in"></i> Авторизация / Регистрация</a></li>
                                                                    </ul>
          </li>
          
                    <li class="dropdown visible-xs">
            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="collapse" data-target=".navbar-menu-collapse"><i class="fa fa-fw fa-th-large"></i> Каталог товаров <i class="fa fa-angle-down"></i></a>
          </li>
                  </ul>
      </div>
    </div>

  </nav>
    <!-- Новый блок -->

nav#top .container{display:flex;flex-direction:row;}
@media screen and (max-width:1200px){
nav#top .container{display:flex;flex-direction:column;}
  nav#top .container div{margin:0 auto;}
}

Comments

[twentytvvo]

Если бы вы скинули исходный код на codepen например, было бы проще под вас написать правильные стили

[hzhzhz124]

twentytvvo,
вариант который, Вы выше написали вроде как не работает
загрузил код html https://codepen.io/anatoly131554/pen/LYRoXbQ

[twentytvvo]

hzhzhz124, отредактировал, все просто, внесите css которые я скинул и замените целиком на тот что я скинул

[hzhzhz124]

twentytvvo, благодарю, работает
вот только можно сделать что бы логотип находится в изначальном месте ?, то есть с левой стороны, а то сейчас он центрируется

[hzhzhz124]

дело в том что я могу вносить изменения только в код css
в админке есть поле специальное для изменения css

[twentytvvo]

Задайте этому div любой клас, и в этой строке впишите его тут:
nav#top .container .ваш_клас_ тут {margin:0 auto;}

[hzhzhz124]

twentytvvo, можно Ваш телеграм или вайбер?

[twentytvvo]

hzhzhz124, по поводу?