居中的东西！导航栏和标题

Question

我对编码真的很陌生。格式化一直是我的一个问题，我花了很多时间在这里查看类似的问题，阅读教程等，并尝试了不同的东西。我在一个页面上具有完全相同的代码，并且它看起来很中心。然而，我无法让我的物品在这里居中或复制。一旦我将我的标题居中，我想让导航栏位于下方。请帮忙。

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"> \t 
 
      <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> \t 
 
     </div> 
 
    </div>

Answer 1

要居中标题：使.box的宽度：100％，H 2的text-align：中心。 居中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>

Answer 2

我看到你使用引导。你可以用更少的标记来做你想做的事。

.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

Answer 3

这是对你有好处？ （请看段）

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

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

Answer 4

您可以使用更好的语义代码，以明确这部分是如何运作，然后简化与引导内置类的代码，例如，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已经以各种方式覆盖的类。