导航栏不会中心引导

我有一个导航栏，我想集中在标题下面。我在这里错过了一些东西，我希望它能够正确调整大小，并保持整个方向的中心位置。导航栏不会中心引导

<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

来源

2017-04-24 Jiroscopes

从链接中删除float，然后使li的inline-block，然后text-align: center上的父母（您已经拥有）将集中一切。

ul上还有一个默认左填充，因此请将padding: 0添加到.portfolio-nav，以使其真正居中。

而不是增加一个右边距所有a的“在导航S，只添加这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>

来源

2017-04-24 01:16:23

这个工作很完美，但是Col-md-6必须改为col-md-12。谢谢！ – Jiroscopes

@Jiroscopes啊是错过了，虽然你甚至需要'.col-md-12'吗？它已经在一个专栏中。我刚刚删除了'.col-md-6'，看起来没问题。那样有用吗？ –

啊你是对的！ – Jiroscopes

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

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>

来源

2017-04-24 01:08:18

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

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

这里是fiddle

来源

2017-04-24 01:17:49 Santosh

删除float属性fr0m Nav链接：

.portfolio-nav a{float:none}

使用内嵌显示的属性，您导航列表项。

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

来源

2017-04-24 02:30:43

导航栏不会中心引导

回答

相关问题