5

这是我的现场：http ://ancient-badlands-4040.herokuapp.com/

我正在尝试使图像居中，并使链接与图像垂直对齐。

到目前为止，在阅读了这篇文章Twitter Bootstrap - 在导航栏中居中品牌徽标后，我得到了很多帮助

通过调整我的“品牌”类（我将宽度设置为 28%），我早些时候成功地将图像居中。不幸的是，我也不得不调整“导航栏”类的宽度，在调整宽度后它改变了我的标志的位置。

我将代码更改为以下内容，我试图将图像居中并使链接与我的中心图像均匀对齐。

任何帮助将不胜感激，谢谢！:)

HTML：**更新了 div 和 ul 类

    <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;

}
4

1 回答 1

4

这是 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;
  }
}
于 2013-06-27T21:57:24.820 回答