在Twitter引导导航栏中将图像居中 [英] Centering an Image in a twitter bootstrap navbar

问题描述

这是我的实时网站： http://ancient-badlands-4040.herokuapp.com/

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

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

我之前通过调整品牌类别（将宽度设置为28％）成功地将图片居中。不幸的是，在调整宽度后，我还必须调整 navbar类的宽度，从而改变了徽标的位置。

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

任何帮助将不胜感激，谢谢！ ：）

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 crash> 
< ul class = nav pull-right> 
< li> a" CODEY< / a> 
< / li> 
< li> < a> CODEY< / li> 
< / ul> 
 
< ul class = nav pull-left> 
< li> a< a> / a< / li> 
< li> a< a> / a< / li> 
< li> a< a> / 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，无衬线； 
 @import url（http://fonts.googleapis.com/css?family=Archivo+Black）; 
 
 
 @ import引导程序； 
 
 body {
 
背景：url（’[e-mail]’）; 
} 
 
 
 @ import引导响应； 
 
 .navbar-inner {
 @include box-shadow（none！important）; 
边界：0； 
宽度：100 %%； 
保证金：自动； 
} 
 
 
 
 .navbar .brand {
 margin-left：auto; 
 margin-right：auto; 
宽度：20像素； 
 float：无； 
 
} 
  

解决方案

CodePen中的几个示例- http://codepen.io/michaellee/pen/nLmJa

基本上，第一个示例使用display：inline-block;对齐所有内容并垂直对齐：中；

第二个示例更像您的示例，您可以在其中向左和向右浮动导航，并使用填充来创建垂直，居中的外观。 / p>

HTML

 < header> 
< ul class = nav-left> 
< li>项目1< / li> 
< li>项目2< / li> 
< li>项目3< / li> 
< / ul> 
< span class = logo>徽标！< / span> 
< ul class = nav-right> 
< li>项目1< / li> 
< li>项目2< / li> 
< li>项目3< / li> 
< / ul> 
< / header> 
< br /> 
< header class = second> 
< ul class = nav-left> 
< li>项目1< / li> 
< li>项目2< / li> 
< li>项目3< / li> 
< / ul> 
< span class = logo>徽标！< / span> 
< ul class = nav-right> 
< li>项目1< / li> 
< li>项目2< / li> 
< li>项目3< / li> 
< / ul> 
< / header> 
  

CSS

  header {
 width：100％; 
 text-align：center; 
背景：＃e63100； 
 display：block; 
溢出：隐藏； 
} 
 ul {
列表样式：无； 
显示：inline-block; 
 vertical-align：middle; 
保证金：0; 
填充：0； 
 li {
 display：inline-block; 
} 
} 
 
 .logo {
 font-size：30px; 
 vertical-align：middle; 
保证金：0 40px; 
} 
 
 .second {
 .nav-left {
 float：left; 
} 
 ul {
 padding：30px 0; 
} 
 .nav-right {
 float：right; 
} 
 .logo {
 padding：20px 0; 
显示：inline-block; 
} 
} 
  

Here is my live site: http://ancient-badlands-4040.herokuapp.com/

I am trying to center my image and also have the links align vertically with the image.

I got a lot of help with this so far after reading this post Twitter Bootstrap - centering brand logo in navbar

I was successful earlier centering my image by adjusting my "brand" class (I set the width to 28%). Unfortunately, I had to adjust the "navbar" class's width as well, after adjusting the width it changed the position of my logo.

I changed my code to the following below, I am trying to center my image and have the links line up evenly with my center image.

Any help would be appreciated, thanks! :)

HTML: **Updated divs and ul classes

    <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('[e-mail]');
}


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

}

解决方案

Here are a couple examples for you in a CodePen - http://codepen.io/michaellee/pen/nLmJa

Basically the first example uses display: inline-block; to align everything in a line and vertical-align: middle; the blocks.

The second example is more like yours where you can float the nav's to the left and right and use padding to create a vertically, centered look and feel.

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

这篇关于在Twitter引导导航栏中将图像居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！