Question

我有一个导航栏，我希望在标题下面居中。我在这里遗漏了一些东西，我想让它正确调整大小，并保持整个方向的中心。

    <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

Answer 1

从链接中移除float并制作li的{{1}}，然后在父级（您已有）上inline-block将所有内容集中在一起。

text-align: center上还有一个默认的左侧填充，因此将ul添加到padding: 0，以使其真正居中。

而不是为导航中的所有.portfolio-nav添加右边距，而只是在2 a之间添加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;
}

Answer 2

您可以将列设置为仅使用一半大小，然后使列居中

CSS

.col-centered{
    float: none;
    margin: 0 auto;
}

HTML

<div class="row">
    <div class="col-md-6 col-xs-6 text-center col-centered">
          <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>

Answer 3

您需要为.portfolio-nav-holder提供宽度以使其居中对齐

.portfolio-nav-holder{
    height: 20px;
    margin: 0 auto;
    overflow: hidden;
   width: 450px;
}

以下是fiddle

Answer 4

删除Float Property fr0m Nav链接：

.portfolio-nav a{float:none}

在导航列表项中使用显示内联属性。

 .portfolio-nav li{ display:inline-block}

Nav Bar Wont Center Bootstrap

4 个答案: