在 767px 和 992px 之间居中导航品牌和菜单
Posted
技术标签:
【中文标题】在 767px 和 992px 之间居中导航品牌和菜单【英文标题】：Center nav-brand and menu between 767px and 992px 【发布时间】：2015-12-11 15:01:12 【问题描述】：我在这里阅读了有关 *** 的其他问题，但我无法弄清楚（不工作），如何将导航栏菜单和徽标居中在 767px 和 992px 之间以用于移动设备...
对于 PC 是：
----------- simple links menu--
-- logo ------------- navmenu--
...对于小型设备 > 767px 和
------ simple links menu ------
-------------- logo -----------
------------ navmenu ----------在 767 像素以下很好 - 有一个折叠菜单...
这里是仅用于标题导航和完整 css 的代码：
@import url("http://fonts.googleapis.com/css?family=Libre+Baskerville:400italic");
@import url("http://fonts.googleapis.com/css?family=Lato:400,700,400italic");
/* ------------------------------------------------------------------
General Styles
------------------------------------------------------------------ */
body
background: #212121;
overflow-x: hidden;
-ms-overflow-style: scrollbar;
font: 400 16px/1.8 "Lato", sans-serif;
color: #eee;
img
max-width: 100%;
height: auto;
iframe
border: 0;
/* ------------------------------------------------------------------
Selection
------------------------------------------------------------------ */
::-moz-selection
background: #000;
color: #fff;
::-webkit-selection
background: #000;
color: #fff;
::selection
background: #000;
color: #fff;
/* ------------------------------------------------------------------
Transition elsements
------------------------------------------------------------------- */
a,
.btn
-webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
/* ------------------------------------------------------------------
Reset box-shadow
------------------------------------------------------------------- */
.btn,
.well,
.panel,
.progress,
.form-control, .form-control:hover, .form-control:focus
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
/* ------------------------------------------------------------------
Reset border-radius
------------------------------------------------------------------- */
.well, .label, .alert,
.modal-content
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
/* ------------------------------------------------------------------
Typography
------------------------------------------------------------------- */
a
color: rgba(17, 17, 17, 0.55);
a:hover, a:focus
text-decoration: none;
color: #fafafa;
outline: 0;
/* ------------------------------------------------------------------
Tabs and Accordion
------------------------------------------------------------------- */
.nav-tabs
border-color: #fafafa;
.nav-tabs > li > a
font-size: 12px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
.nav-tabs >li.active > a,
.nav-tabs >li.active > a:hover,
.nav-tabs >li.active > a:focus
border: 1px solid #fafafa;
border-bottom-color: transparent;
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus
background: #fafafa;
.tab-content
border: 1px solid #fafafa;
border-top: 0;
padding: 15px;
.tab-content :last-child
margin-bottom: 0;
/* ------------------------------------------------------------------
Navigation
------------------------------------------------------------------- */
.navbar-custom
-webkit-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
.navbar-custom
background: #212121;
border: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
.navbar-custom .navbar-brand
float: none;
height: 60px;
display: table-cell;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
letter-spacing: 4px;
font-weight: 400;
font-size: 20px;
color: #fafafa;
.navbar-custom a,
.navbar-custom .navbar-brand
color: #fafafa;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
.navbar-custom .nav li > a
position: relative;
.navbar-custom .nav > li > a:focus,
.navbar-custom .nav > li > a:hover,
.navbar-custom .nav .open > a,
.navbar-custom .nav .open > a:focus,
.navbar-custom .nav .open > a:hover,
.navbar-custom .dropdown-menu > li > a:focus,
.navbar-custom .dropdown-menu > li > a:hover
background: none;
color: #757575;
/* Navbar toggle */
.navbar-custom .navbar-toggle
margin-top: 13px;
.navbar-custom .navbar-toggle .icon-bar
background: #bdbdbd;
/* Navbar dropdown */
.navbar-custom .dropdown-menu
background: #212121;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
.dropdown-menu > li > a
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #fafafa;
white-space: nowrap;
.navbar-custom .dropdown-menu > li > a
border: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
padding: 11px 15px;
.navbar-custom .dropdown-menu .dropdown-menu
top: 0;
left: 100%;
right: auto;
margin-top: -1px;
.leftauto
right: 0 !important;
left: auto !important;
.navbar-custom .dropdown-menu.left-side
right: 100%;
left: auto;
.navbar-custom .dropdown-toggle:after
position: absolute;
display: block;
right: 0;
top: 50%;
margin-top: -5px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 9px;
content: "\f107";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.navbar-custom .navbar-nav > .dropdown > .dropdown-toggle
padding-right: 28px;
.navbar-custom .navbar-nav > .dropdown > .dropdown-toggle:after
position: absolute;
display: block;
right: 15px;
top: 50%;
margin-top: -5px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 9px;
content: "\f107";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.light-logo
display: none !important;
.navbar-transparent.navbar-dark .light-logo
display: block !important;
.navbar-transparent.navbar-dark .dark-logo
display: none !important;
/* Push search */
.navbar-custom .navbar-nav > .dropdown > .dropdown-toggle.search-dropdown:after
content: "";
.dropdown-search
position: relative;
padding: 7px 5px;
.dropdown-search .form-control
position: relative;
.dropdown-search .search-btn
position: absolute;
background: transparent;
border: none;
overflow: hidden;
top: 50%;
right: 0px;
width: 42px;
height: 32px;
line-height: 30px;
font-size: 14px;
outline: none;
color: #fafafa;
margin-top: -16px;
/* ------------------------------------------------------------------
Hero
------------------------------------------------------------------- */
.module-hero
position: relative;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.hero-caption
display: table;
height: 100%;
width: 100%;
text-align: center;
.hero-text
position: relative;
display: table-cell;
vertical-align: middle;
height: 100%;
/* Hero caption sizes */
.mh-line-size-1,
.mh-line-size-2,
.mh-line-size-3,
.mh-line-size-4,
.mh-line-size-5,
.mh-line-size-6
font-weight: 700;
opacity: 0.99;
margin: 0;
.mh-line-size-1
letter-spacing: 50px;
font-size: 26px;
.mh-line-size-2
letter-spacing: 40px;
font-size: 24px;
.mh-line-size-3
letter-spacing: 12px;
font-size: 22px;
.mh-line-size-4
letter-spacing: 8px;
font-size: 14px;
.mh-line-size-5
letter-spacing: 6px;
font-size: 12px;
.mh-line-size-6
font-weight: 400;
font-size: 16px;
/* ------------------------------------------------------------------
Modules
------------------------------------------------------------------- */
.amber color: ;
.wrapper
background: #212121;
overflow: hidden;
margin: 0 auto;
width: 100%;
.module,
.module-small
padding: 140px 0;
position: relative;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.module-small
padding: 70px 0;
.navbar-custom + .module
padding: 200px 0;
.navbar-custom + .module-small
padding: 130px 0;
.module-parallax
background-attachment: fixed;
/* Module titles */
.module-title
text-transform: uppercase;
letter-spacing: 10px;
text-align: center;
font-size: 20px;
margin-bottom: 70px;
.module-subtitle
text-align: center;
font-size: 15px;
margin-bottom: 70px;
.module-icon
font-size: 36px;
margin-bottom: 70px;
.module-title + .module-subtitle
margin-top: -35px;
.divider
margin: 0;
.copyright
padding: 0 5px;
/* -------------------------------------------------------------------
Responsive Media Queries
------------------------------------------------------------------- */
@media (min-width: 768px)
/* Navbar */
.navbar-nav
margin: 5px -15px;
.navbar-custom .navbar-brand
padding-left: 0;
.navbar-custom .navbar-nav > li > a
padding-top: 20px;
padding-bottom: 20px;
.navbar-transparent
background: transparent;
padding-top: 15px;
padding-bottom: 15px;
background: transparent;
webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
/* Tra */
.navbar-transparent.navbar-dark .navbar-nav > li > a,
.navbar-transparent.navbar-dark .navbar-brand
color: #212121;
.navbar-transparent.navbar-dark .nav > li > a:focus,
.navbar-transparent.navbar-dark .nav > li > a:hover
color: rgba(255, 255, 255, 0.75);
.navbar-custom .dropdown-menu .dropdown-toggle:after
position: absolute;
display: block;
right: 9px;
top: 50%;
margin-top: -6px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 12px;
content: "\f105";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.navbar-custom .dropdown-menu
position: absolute;
display: block;
visibility: hidden;
opacity: 0;
.navbar-custom .open > .dropdown-menu
visibility: visible;
opacity: 1;
.navbar-right .dropdown-menu
right: auto;
left: 0;
/* Comments */
.comment .comment
margin-left: 100px;
@media (max-width: 992px)
/* Hero captions */
.mh-line-size-1
letter-spacing: 40px;
font-size: 26px;
.mh-line-size-2
letter-spacing: 28px;
font-size: 20px;
.mh-line-size-3
letter-spacing: 20px;
font-size: 22px;
.mh-line-size-4
letter-spacing: 8px;
font-size: 16px;
.navbar-custom
letter-spacing: 1px;
font-size: 12px;
/* Portfolio grid */
.work-item,
.grid-sizer
width: 33.3333%;
.work-item.wide,
.work-item.wide-tall
width: 66.6666%;
@media (max-width: 767px)
/* Navbar */
.navbar-custom
letter-spacing: 2px;
font-size: 10px;
.navbar-transparent.navbar-dark .light-logo
display: none !important;
.navbar-transparent.navbar-dark .dark-logo
display: block !important;
.navbar-custom .navbar-nav .open .dropdown-menu > li > a,
.navbar-custom .navbar-nav .open .dropdown-menu .dropdown-header
padding: 10px 25px;
.navbar-custom .navbar-nav .open .dropdown-menu .dropdown-menu .dropdown-header,
.navbar-custom .navbar-nav .open .dropdown-menu .dropdown-menu > li > a
padding: 10px 35px;
.navbar-custom .dropdown-toggle:after, .navbar-custom .dropdown-menu .dropdown-toggle:after
right: 15px;
content: "\f107";
.navbar-custom .nav > .open >.dropdown-toggle:after, .navbar-custom .dropdown-menu .dropdown.open .dropdown-toggle:after
right: 15px;
content: "\f106";
/* Hero captions */
.mh-line-size-1
letter-spacing: 24px;
font-size: 26px;
.mh-line-size-2
letter-spacing: 16px;
font-size: 15px;
.mh-line-size-3
letter-spacing: 14px;
font-size: 14px;
.mh-line-size-4
letter-spacing: 4px;
font-size: 14px;
.mh-line-size-5
letter-spacing: 2px;
font-size: 13px;
.mh-line-size-6
font-size: 13px;
/* Portfolio filters */
.filters li
display: block;
margin: 0 10px 10px;
.filters li:last-child
margin: 0 10px 140px;
/* Portfolio grid */
.work-item,
.grid-sizer
width: 50%;
.work-item.wide,
.work-item.wide-tall
width: 100%;
@media (max-width: 500px)
/* Hero captions */
.mh-line-size-1
letter-spacing: 12px;
font-size: 26px;
.mh-line-size-2
letter-spacing: 6px;
font-size: 14px;
.mh-line-size-3
letter-spacing: 4px;
font-size: 13px;
.mh-line-size-4
letter-spacing: 4px;
font-size: 12px;
.mh-line-size-5
letter-spacing: 2px;
font-size: 11px;
.mh-line-size-6
font-size: 12px;
/* Portfolio grid */
.work-item,
.grid-sizer
width: 100%;
.work-item.wide,
.work-item.wide-tall
width: 100%;
/* -------------------------------------------------------------------
Multi-columns-row
------------------------------------------------------------------- */
.multi-columns-row .first-in-row
clear: left;
.multi-columns-row .col-xs-6:nth-child(2n + 3) clear: left;
.multi-columns-row .col-xs-4:nth-child(3n + 4) clear: left;
.multi-columns-row .col-xs-3:nth-child(4n + 5) clear: left;
.multi-columns-row .col-xs-2:nth-child(6n + 7) clear: left;
.multi-columns-row .col-xs-1:nth-child(12n + 13) clear: left;
@media (min-width: 768px)
.multi-columns-row .col-xs-6:nth-child(2n + 3) clear: none;
.multi-columns-row .col-xs-4:nth-child(3n + 4) clear: none;
.multi-columns-row .col-xs-3:nth-child(4n + 5) clear: none;
.multi-columns-row .col-xs-2:nth-child(6n + 7) clear: none;
.multi-columns-row .col-xs-1:nth-child(12n + 13) clear: none;
.multi-columns-row .col-sm-6:nth-child(2n + 3) clear: left;
.multi-columns-row .col-sm-4:nth-child(3n + 4) clear: left;
.multi-columns-row .col-sm-3:nth-child(4n + 5) clear: left;
.multi-columns-row .col-sm-2:nth-child(6n + 7) clear: left;
.multi-columns-row .col-sm-1:nth-child(12n + 13) clear: left;
@media (min-width: 992px)
.multi-columns-row .col-sm-6:nth-child(2n + 3) clear: none;
.multi-columns-row .col-sm-4:nth-child(3n + 4) clear: none;
.multi-columns-row .col-sm-3:nth-child(4n + 5) clear: none;
.multi-columns-row .col-sm-2:nth-child(6n + 7) clear: none;
.multi-columns-row .col-sm-1:nth-child(12n + 13) clear: none;
.multi-columns-row .col-md-6:nth-child(2n + 3) clear: left;
.multi-columns-row .col-md-4:nth-child(3n + 4) clear: left;
.multi-columns-row .col-md-3:nth-child(4n + 5) clear: left;
.multi-columns-row .col-md-2:nth-child(6n + 7) clear: left;
.multi-columns-row .col-md-1:nth-child(12n + 13) clear: left;
@media (min-width: 1200px)
.multi-columns-row .col-md-6:nth-child(2n + 3) clear: none;
.multi-columns-row .col-md-4:nth-child(3n + 4) clear: none;
.multi-columns-row .col-md-3:nth-child(4n + 5) clear: none;
.multi-columns-row .col-md-2:nth-child(6n + 7) clear: none;
.multi-columns-row .col-md-1:nth-child(12n + 13) clear: none;
.multi-columns-row .col-lg-6:nth-child(2n + 3) clear: left;
.multi-columns-row .col-lg-4:nth-child(3n + 4) clear: left;
.multi-columns-row .col-lg-3:nth-child(4n + 5) clear: left;
.multi-columns-row .col-lg-2:nth-child(6n + 7) clear: left;
.multi-columns-row .col-lg-1:nth-child(12n + 13) clear: left;
.et-icons .box1
border: 1px solid #fafafa;
display: block;
width: 25%;
float: left;
padding: 0;
font-size: 13px;
margin: -1px 0 0 -1px;
.et-icons .box1 > span
display: inline-block;
border-right: 1px solid #fafafa;
min-width: 60px;
min-height: 60px;
text-align: center;
line-height: 60px;
font-size: 28px;
margin-right: 5px;
.fa-icons
padding: 0 15px;
.fa-icons > div
padding: 0;
border: 1px solid #fafafa;
margin: -1px 0 0 -1px;
font-size: 13px;
.fa-icons > div > i
display: inline-block;
margin-right: 5px;
min-width: 40px;
min-height: 40px;
border-right: 1px solid #fafafa;
line-height: 40px;
text-align: center;
font-size: 14px;
/* ------- CUSTOM Styles ------*/
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small
font-weight: normal;
line-height: 1;
color: #9e9e9e;
.amber color: #EB9532;
.text-21 color: #212121 !important;
.bk h1, .bk .h1,
.bk h5, .bk .h5
line-height: 1.4;
font-weight: bold;
color: #212121 !important;
.module-divider
height: 20px;
width: 100%;
background-color: #212121;
.vofset padding-top: 5px !important; padding-bottom: 5px !important;
.vofset0 padding-top: 0px;
.vofset1 padding-top: 10px;
.vofset2 padding-top: 20px;
.vofset3 padding-top: 30px;
.vofset4 padding-top: 40px;
.vofset5 padding-top: 50px;
.vofset7 padding-top: 70px;
.vofset10 padding-top: 100px;
.vofset12 padding-top: 120px;
.vofset14 padding-top: 140px;
.lofset1 padding-bottom: 10px;
.lofset2 padding-bottom: 20px;
.lofset3 padding-bottom: 30px;
.lofset4 padding-bottom: 40px;
.lofset5 padding-bottom: 50px;
.lofset7 padding-bottom: 70px;
.lofset10 padding-bottom: 100px;
.lofset12 padding-bottom: 120px;
.lofset14 padding-bottom: 140px;
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
.navbar
min-height: 90px;
.navbar-custom
padding-top: 10px;
.navbar-top
padding: 5px 0px;
margin: 0px -15px;
position: relative;
background-repeat: no-repeat;
text-transform: uppercase;
letter-spacing: 0px;
text-align: right;
font-size: 10px;
color: #9e9e9e;
background: #212121;
.navbar-top a
margin: 0px 0px 0px 15px !important;
color: #9e9e9e;
text-decoration: none;
text-transform: uppercase;
font: "Lato", sans-serif;
line-height: 20px;
font-size: 12px;
letter-spacing: 1px;
font-weight: bold;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition-delay: 0s;
transition-duration: 0s;
transition-property: none;
transition-timing-function: ease;
.navbar-top a:hover
color: #eee;
.navbar-custom .navbar-toggle .icon-bar
background: #e9e9e9;
.navbar-toggle .icon-bar+.icon-bar
margin-top: 8px;
.navbar-toggle .icon-bar
margin-top: 3px;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
<!-- NAVIGATION -->
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-12 navbar-top hidden-xs">
Simple Links Here
</div>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- YOU LOGO HERE -->
<a class="navbar-brand" href="index.html">
<!-- IMAGE OR SIMPLE TEXT -->
<img class="dark-logo" src="assets/images/top_logo_3.png" >
</a>
</div>
<div class="collapse navbar-collapse" id="custom-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home</a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Multi Page</a>
<ul class="dropdown-menu">
<li><a href="index.html">Parallax</a></li>
<li><a href="index-2.html">Film overlay</a></li>
<li><a href="index-3.html">Slider</a></li>
<li><a href="index-4.html">Text rotator</a></li>
<li><a href="index-5.html">Youtube background</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">One page</a>
<ul class="dropdown-menu">
<li><a href="op-index.html">Parallax</a></li>
<li><a href="op-index-2.html">Film overlay</a></li>
<li><a href="op-index-3.html">Slider</a></li>
<li><a href="op-index-4.html">Text rotator</a></li>
<li><a href="op-index-5.html">Youtube background</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About</a>
<ul class="dropdown-menu">
<li><a href="about-1.html">About 1</a></li>
<li><a href="about-2.html">About 2</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<li><a href="services-1.html">Services 1</a></li>
<li><a href="services-2.html">Services 2</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact</a>
<ul class="dropdown-menu">
<li><a href="contact-1.html">Contact 1</a></li>
<li><a href="contact-2.html">Contact 2</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pricing</a>
<ul class="dropdown-menu">
<li><a href="pricing-1.html">Pricing 1</a></li>
<li><a href="pricing-2.html">Pricing 2</a></li>
</ul>
</li>
<li><a href="login-register.html">Login / Register</a></li>
<li><a href="faq-1.html">FAQ</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Features</a>
<ul class="dropdown-menu" role="menu">
<li><a href="components-buttons.html">Buttons</a></li>
<li><a href="components-icons.html">Icons</a></li>
<li><a href="components-boxes.html">Content boxes</a></li>
<li><a href="components-typography.html">Typography</a></li>
<li><a href="components-bars.html">Progress bars</a></li>
<li><a href="components-tabs.html">Tab & Accordian</a></li>
<li><a href="components-tables.html">Pricing tables</a></li>
<li><a href="components-modules.html">Modules & Overlays</a></li>
</ul>
</li>
<li><a href="contact-1.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- /NAVIGATION -->【问题讨论】：
您可以在媒体查询中添加navbartext-align:center;
【参考方案1】：
这是你想要的吗？
输入这段代码：
@media only screen and (max-width: 992px)
.navbar-header
margin: 0 auto;
text-align: center;
width: 50%;
.navbar-brand
display: inline-block;
img.dark-logo
text-align: center;
div#custom-collapse
margin: 0 auto;
width: 50%;
.nav .navbar-nav .navbar-right
width: 50%;
margin: 0 auto;
【讨论】：
不工作...我试过这个：@media screen and (max-width: 992px) .navbar-header width: 100%; img.dark-logo 文本对齐：居中； 那你应该试试 margin: 0 auto;而不是使用 text-align:center;以上是关于在 767px 和 992px 之间居中导航品牌和菜单的主要内容，如果未能解决你的问题，请参考以下文章