我有一个导航栏,我想在标题下方居中。我在这里缺少一些东西,我希望它能正确调整大小,并始终保持居中。
<div class="row">
<div class="col-md-12">
<h2 class="portfolio-head">PORTFOLIO</h2>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 text-center">
<div class="portfolio-nav-holder col-md-6">
<ul class="portfolio-nav">
<li><a>Featured</a></li>
<li><a>Websites</a></li>
<li><a>Logos</a></li>
<li><a>Graphics</a></li>
<li><a>Photography</a></li>
</ul>
</div>
</div>
</div>
DEMO
最佳答案
从链接中删除float
并创建li
的inline-block
,然后父级(您已经拥有)上的text-align: center
将所有内容居中。
在ul
上还有一个默认的左填充,因此将padding: 0
添加到.portfolio-nav
使其真正居中。
而不是向导航中的所有a
添加正确的边距,只需将其添加到2个a
之间,并使用.portfolio-nav li:not(:last-child) a { margin-right: 15px; }
.portfolio-head {
font-family: 'Lato', sans-serif;
font-size: 2.5em;
font-style: italic;
text-align: center;
}
.portfolio-nav-holder {
height: 20px;
margin: 0 auto;
overflow: hidden;
}
.portfolio-nav {
color: black;
list-style: none;
padding: 0;
}
.portfolio-nav a {
text-decoration: none;
color: black;
}
.portfolio-nav li:not(:last-child) a {
margin-right: 15px;
}
.portfolio-nav li {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<h2 class="portfolio-head">PORTFOLIO</h2>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 text-center">
<div class="portfolio-nav-holder">
<ul class="portfolio-nav">
<li><a>Featured</a></li>
<li><a>Websites</a></li>
<li><a>Logos</a></li>
<li><a>Graphics</a></li>
<li><a>Photography</a></li>
</ul>
</div>
</div>
</div>
关于jquery - 导航栏Wont Center Bootstrap,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43578224/