центрирование изображения в Twitter Bootstrap

Question

навигационной панели Вот мой живой сайт: http://ancient-badlands-4040.herokuapp.com/

Я пытаюсь сосредоточить свое изображение, а также имеет ссылки выравнивание по вертикали с изображением.

Я получил много помощи с этим до сих пор после прочтения этого поста Twitter Bootstrap - centering brand logo in navbar

Я был успешным раньше центрирование моего изображения, регулируя мой класс «бренд» (установить ширину до 28%). К сожалению, мне пришлось также корректировать ширину класса «navbar», после настройки ширины он изменил положение моего логотипа.

Я изменил свой код на нижеследующее ниже, я пытаюсь центрировать свое изображение и выравнивать линии равномерно с моим центральным изображением.

Любая помощь будет оценена, спасибо! :)

HTML: ** Обновленные дивы и ул классы

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner "> 
    <div class="container-fluid"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <div class="nav-collapse collapse"> 
     <ul class="nav pull-right"> 
      <li><a>CODEY</a> 
      </li> 
      <li> <a>CODEY</a></li> 
     </ul> 

     <ul class="nav pull-left"> 
      <li><a>CODEY</a></li> 
      <li><a>CODEY</a></li> 
      <li><a>CODEY</a></li> 
      </ul> 

      <a class="brand"></a> 
      <%= image_tag 'ctclogonewnobg.png', alt: 'logo' %> 

     </div><!--/.nav-collapse --> 
     </div> 
    </div> 
    </div> 

CSS:

$navbarLinkColor: #90fce8; 
$navbarBackground: #ff3600; 
$navbarBackgroundHighlight: #ff3600; 
$navbarText: Archivo Black, sans-serif; 
@import url(http://fonts.googleapis.com/css?family=Archivo+Black); 


@import 'bootstrap'; 

body { 

    background: url('escheresque_@2X.png'); 
} 


@import 'bootstrap-responsive'; 

.navbar-inner { 
    @include box-shadow(none !important); 
    border: 0; 
    width: 100%%; 
    margin: auto; 
} 



.navbar .brand { 
    margin-left: auto; 
    margin-right: auto; 
    width: 20px; 
    float: none; 

} 

Answer 1

Вот пару примеров для вас в CodePen - http://codepen.io/michaellee/pen/nLmJa

В основном первый пример использует display: inline-block; выровнять все по строке и вертикально-выровнять: посередине; блоков.

Второй пример больше похож на ваш, где вы можете плавать навигаторы влево и вправо и использовать отступы для создания вертикального, центрированного внешнего вида.

HTML

<header> 
    <ul class="nav-left"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
    <span class="logo">Logo!</span> 
    <ul class="nav-right"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
</header> 
<br /> 
<header class="second"> 
    <ul class="nav-left"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
    <span class="logo">Logo!</span> 
    <ul class="nav-right"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
</header> 

CSS

header{ 
    width: 100%; 
    text-align: center; 
    background: #e63100; 
    display:block; 
    overflow: hidden; 
} 
ul{ 
    list-style: none; 
    display: inline-block; 
    vertical-align: middle; 
    margin: 0; 
    padding: 0; 
    li{ 
    display: inline-block; 
    } 
} 

.logo{ 
    font-size: 30px; 
    vertical-align: middle; 
    margin: 0 40px; 
} 

.second{ 
    .nav-left{ 
    float: left; 
    } 
    ul{ 
    padding: 30px 0; 
    } 
    .nav-right{ 
    float: right; 
    } 
    .logo{ 
    padding: 20px 0; 
    display: inline-block; 
    } 
}