twitter-bootstrap 在 Twitter 引导程序导航栏中将图像居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17352791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering an Image in a twitter bootstrap navbar
提问by HelloWorld
Here is my live site: http://ancient-badlands-4040.herokuapp.com/
这是我的实时站点：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
在阅读了这篇文章Twitter Bootstrap - 在导航栏中居中品牌标志后，到目前为止我得到了很多帮助
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.
我之前通过调整我的“品牌”类（我将宽度设置为 28%）成功地将我的图像居中。不幸的是，我也不得不调整“导航栏”类的宽度，在调整宽度后它改变了我的标志的位置。
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
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:
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('[email protected]');
}
@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;
}
采纳答案by michaellee
Here are a couple examples for you in a CodePen - http://codepen.io/michaellee/pen/nLmJa
以下是 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.
基本上第一个例子使用 display: inline-block; 将所有内容对齐并垂直对齐：中间；块。
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
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
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;
}
}
