[英]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 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;
}
以下是CodePen中的幾個示例 - http://codepen.io/michaellee/pen/nLmJa
基本上第一個例子使用display:inline-block; 對齊行中的所有內容和vertical-align:middle; 塊。
第二個例子更像是你的,你可以向左和向右浮動導航,並使用填充創建一個垂直,居中的外觀和感覺。
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;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.