如何使导航栏文本居中？答案

【问题标题】：How do I center navbar text?如何使导航栏文本居中？
【发布时间】：2014-01-22 11:39:44
【问题描述】：

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    </head>
    <title>Main Page</title>
    <body>
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">                    
                    <ul  class="nav nav-pills-justified">
                        <li><a href "#">about</a></li>
                        <li><a href "#">blog</a></li>
                        <li><a href "#">portfolio</a></li>
                        <li><a href "#">contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <script src="js/bootstrap.js">
        </script>
    </body> 
</html>

我希望导航栏中的文本居中固定顶部。

【问题讨论】：

JSfiddle 请。
你的问题我不清楚。请提供一个 jsFiddle：jsfiddle.net
感谢您的编辑。你知道导航栏是如何在顶部水平的吗？（（至少我拥有的是））。我希望文本“关于、博客、投资组合、联系方式”居中。我知道如何简化我的要求......

标签： html css twitter-bootstrap navbar

【解决方案1】：

在这里，我发布了带有居中导航文本的简单导航栏。你可以用这个...

HTML

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

    <ul class="nav-pills-justified">
      <li><a href ="#">about</a></li>
      <li><a href ="#">blog</a></li>
      <li><a href ="#">portfolio</a></li>
      <li><a href ="#">contact</a></li>
    </ul>

    </div>
  </div>
</div>

CSS

.nav-pills-justified
{
    text-align: center;
    width: 100%;
    min-width:980px;
    background: #EDEDED;
    color: #000000;
    height: 50px;
    list-style-type: none;
}
.nav-pills-justified li
{
    display: inline-block;
}
.nav-pills-justified li a
{
    text-decoration: none;
    padding: 15px 25px;
    display: inline-block;
}
.nav-pills-justified li a:hover
{
    background: red;
}

DEMO

【讨论】：

非常感谢！另外如何在 HTML 中使用 CSS？是不是： ?
@user3223207 ：没有

【解决方案2】：

.nav-pills-justified {
   height:50px;
   list-style-type:none;
  }
  .nav-pills-justified li {
  display: inline-block;
  margin-bottom:1000px;
  margin-left:250px;
  width:1px;
  font-size: 20px;
  }
  .nav-pills-justified li a {
  display: inline-block; 
  }

【讨论】：