我正在嘗試實現Bootstrap 3導航欄，以使品牌徽標始終保留在中間。這是代碼：<div class="navbar navbar-fixed-top navbar-default"> <div class="navbar-inner"> <div class="container"> <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" style="margin: 0; float: none;" href="#"> <img src="/Content/themes/next/images/logo.png" /></a> <div class="nav-collapse"> <ul class="nav"> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> </ul> </div> <ul class="nav pull-right"> <li> <a href="#"> <div class="nextCog"></div> </a> </li> </ul> <span class="navbar-text pull-right">superpup1 </span> </div> </div></div>它使導航欄看起來很漂亮： 在此處輸入圖片說明但是，我希望徽標（綠色）始終保持在中間。我將這種樣式添加到帶有“ brand”類的標簽中：<a class="brand" style="margin: 0; float: none; text-align:center" href="#"> <img src="/Content/themes/next/images/logo.png" /></a>它部分解決了問題：徽標位于中間，但將其余的導航欄元素向下推：在此處輸入圖片說明我想消除這種不良影響。您能提出解決方案嗎？從一開始就將徽標居中可能是錯誤的方法？
3 回答
精慕HU
TA貢獻1845條經驗 獲得超8個贊
嘗試這個：
.navbar {
position: relative;
}
.brand {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
將徽標居中放置徽標寬度的50％，減去徽標寬度的一半，這樣在放大和縮小時就不會出現問題。
慕沐林林
TA貢獻2016條經驗 獲得超9個贊
最簡單的方法是CSS轉換：
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
演示：http : //codepen.io/candid/pen/dGPZvR
居中背景徽標引導3
這種方法也適用于徽標的動態大小的背景圖像，并允許我們利用文本隱藏類：
CSS：
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
transform: translateX(-50%);
left: 50%;
position: absolute;
width: 200px; /* no height needed ... image will resize automagically */
}
HTML：
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
</a>
我們也可以使用flexbox。但是，使用此方法，我們必須移至navbar-brand之外navbar-header。這種方式很棒，因為現在我們可以并排放置圖像和文本了：
bootstrap 3徽標居中
.brand-centered {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.navbar-brand {
display: flex;
align-items: center;
}
演示：http：//codepen.io/candid/pen/yeLZax
要僅在移動設備上獲得這些結果，只需將上述css包裝在媒體查詢中：
@media (max-width: 768px) {
}
- 3 回答
- 0 關注
- 668 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消