集中精力！导航栏和标题

时间：2016-02-17 22:45:59

标签： html css

我真的很喜欢编码。格式化始终是我的问题，我花了很多时间在这里查看类似的问题，阅读教程等，并尝试了不同的东西。我在一个页面上有完全相同的代码，它似乎是中心。但是我无法将我的物品放在这里或复制。一旦我的标题居中，我希望我的导航栏位于下方。请帮助。

html, body {
  margin: 0 auto;
  padding: 0;
}
.container {
  max-width: auto;
  margin: 0 auto;
}
.box {
  border: 2px white dotted;
  border-radius: 15px;
  margin-top: 30px;
  margin-left:auto;
  margin-right:auto;
  width: 470px;
  padding: 10px;
  display:inline-block;
}
.nav-pills li a {
  color: black;
  border-radius: 10px;
  margin: 3px;
  font-size: 20px;
  font-weight: 589px;
  vertical-align:middle;
  border-radius:0px;
  background-color: white;
  display:inline-block;
}
.nav-pills {
  position: relative;
  margin-top: 20px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
<div class="header" id="header">
  <div class="container">
    <div class="row row-centered">
      <div class="col-md-4 col-centered">
        <div class="box">	
          <h2>lewis <br><span>Designs</span></h2>
        </div>
      </div>
    </div>
    <div class="menu">
      <div class="row row-centered">
        <div class="col-md-6 col-centered">
          <ul class="nav nav-pills"> 
            <li><a href="./home.html">Home</a></li> 
            <li><a href="./about.html">About</a></li> 
            <li><a href="./gallery.html">Gallery</a></li> 
            <li><a href="./contact">Contact</a></li> 
          </ul>
        </div>	
      </div>
    </div>

4 个答案:

答案 0 :(得分：0)

使标题居中：make .box width：100％和h2 text-align：center。 为了使ul菜单居中，我按照解决方案三：align ul to center of div 

html,
body {
  margin: 0 auto;
  padding: 0;
}
.container {
  max-width: auto;
  margin: 0 auto;
}
.box {
  border: 2px white dotted;
  border-radius: 15px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 100%; // NEW WIDTH
  padding: 10px;
  display: inline-block;
}
.box h2 {
  text-align: center; // CENTER TITLE
}
.nav-pills li a {
  color: black;
  border-radius: 10px;
  margin: 3px;
  font-size: 20px;
  font-weight: 589px;
  vertical-align: middle;
  border-radius: 0px;
  background-color: white;
  display: inline-block;
}
.nav-pills {
  position: relative;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: table; // SOLUTION 3
  margin: 0 auto; //
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="header" id="header">
  <div class="container">
    <div class="row row-centered">
      <div class="col-md-4 col-centered">
        <div class="box">
          <h2>lewis <br><span>Designs</span></h2>
        </div>
      </div>
    </div>
    <div class="menu">
      <div class="row row-centered">
        <div class="col-md-6 col-centered">
          <ul class="nav nav-pills">
            <li><a href="./home.html">Home</a>
            </li>
            <li><a href="./about.html">About</a>
            </li>
            <li><a href="./gallery.html">Gallery</a>
            </li>
            <li><a href="./contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

答案 1 :(得分：0)

我看到你正在使用Bootstrap。你可以用更少的标记做你想做的事。

.nav-pills > li {
  float: none;
  display: inline-block;
}

<div class="container text-center">
    <h2>lewis <br><span>Designs</span></h2>
    <ul class="nav nav-pills text-center"> 
        <li><a href="./home.html">Home</a></li> 
        <li><a href="./about.html">About</a></li> 
        <li><a href="./gallery.html">Gallery</a></li> 
        <li><a href="./contact">Contact</a></li> 
    </ul>
</div>

演示JSFiddle

答案 2 :(得分：0)

这对你有好处吗？ （请查看代码段）

＆＃13;
＆＃13; 
html, body {
 margin: 0 auto;
 padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
 text-align: center;
 border: 2px white dotted;
 border-radius: 15px;
 margin-top: 30px;
 width: 100%;
 padding: 10px;
 display:inline-block;
}
.nav-pills li a {
 color: black;
 border-radius: 10px;
 margin: 3px;
 font-size: 20px;
 font-weight: 589px;
 vertical-align:middle;
 border-radius:0px;
 background-color: white;
 display:inline-block;
}
.nav-pills {
 position: relative;
 margin-top: 20px;
 margin-left:auto;
 margin-right:auto;
 text-align:center;
}
.center-box{
 margin-left: auto;
 margin-right: auto;
 width: 391px;
}
＆＃13; 
<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="header" id="header">
      <div class="container">
        <div class="row row-centered">
          <div class="col-md-6 col-centered">
            <div class="box">
              <h2>lewis                 <br />
                <span>Designs</span>
              </h2>
            </div>
          </div>
        </div>
        <div class="menu">
          <div class="row row-centered">
            <div class="col-md-6 col-centered">
              <div class='center-box'>
                <ul class="nav nav-pills">
                <li>
                  <a href="./home.html">Home</a>
                </li>
                <li>
                  <a href="./about.html">About</a>
                </li>
                <li>
                  <a href="./gallery.html">Gallery</a>
                </li>
                <li>
                  <a href="./contact">Contact</a>
                </li>
              </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以使用更好的语义代码来明确本节的运行方式，然后使用Bootstrap中的内置类简化代码，例如text-center。

  <header class="header text-center" id="header">
    <h1>lewis Designs</h1>
    <nav>
      <ul class="nav nav-pills">
        <li><a href="./home.html">Home</a></li>
        <li><a href="./about.html">About</a></li>
        <li><a href="./gallery.html">Gallery</a></li>
        <li><a href="./contact">Contact</a></li>
      </ul>
    </nav>
  </header>

导航中心所需的唯一CSS是：

  nav {
    display: inline-block;
  }

我绝对建议您熟悉与utility classes in Bootstrap等相关的文档。你可能无法做你想做的任何事情，但是你可以最大限度地减少重标记的需要，并创建一系列Bootstrap已经以各种方式涵盖的类。

相关问题
最新问题