Question

这是我的代码：

<!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>

我希望导航栏中的文字位于固定顶部。

Answer 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

Answer 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; 
  }

如何将导航栏文本居中？

2 个答案: