鏈接不在固定導航中居中

我希望我的導航鏈接居中在我的固定導航欄中，我試圖通過添加填充，但不知何故導航功能會擴展。此外，我試圖垂直對齊，但沒有做太多。我真的很新的CSS這樣的解釋將是有幫助的情況下，如果再次發生鏈接不在固定導航中居中

HTML

`<html> 
<html> 
    <head> 
     <title>Photography | Home </title> 
     <link href="app.css" rel="stylesheet"/> 
     <script type="application/javascript" src="on.js"></script> 
    </head> 
    <body> 

     <header> 
      <div id="branding"> 
       <h2>PHOTOGRAPHY</h2> 
      </div> 
      <nav id="links"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">PHOTO GALLERY</a></li> 
       <li><a href="#">VIDEO GALLERY</a></li> 
      </ul> 
       </nav> 
     </header> 
     <section id="showcase"> 
      <div class="container"> 
      <h2>Photography</h2> 
      <p>Our photo's are always presente in the best 
       quality possible with carefulness 
      </p> 
      </div> 
     </section> 
     <section class="boxes"> 
      <div class="container"> 
       <div class="box">asdasdsada 
        <img src="./images/CameraIcon.png"> 
        <h2>Photography</h2> 
        <p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p> 
       </div> 
         <div class="box"> 
          <img src="./images/CommunityICON.jpg"> 
          <h2>Guranteed!</h2> 
          <p>If you are not satisfied with our work you will have an 80% refund</p> 


       </div> 
         <div class="box"> 
          <img src="./images/TimeIcon.png"> 
          <h2>Time Managment</h2> 
          <p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p> 

       </div> 
      </div> 
     </section> 
     <footer> 
      <p>Note that any copyright &copy; is reserved</p> 
     </footer> 
    </body> 
</html>`

CSS

body { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    margin: 0; 
    padding: 0; 
} 
p { 
    margin: 0; 
    padding: 0; 
} 
.container { 
    width: 80%; 
    margin: auto; 
    overflow: hidden 
} 
header { 
    background-color: #191919; 
    position: fixed; 
    width: 100%; 
    color: #edf9ff; 
    min-height: 70px; 
    border-bottom: #0fe216 3px solid; 
    padding-top: 30px; 
} 
header a { 
    text-decoration: none; 
    text-transform: uppercase; 
} 
header ul { 
    margin: 0; 
} 
header li { 
    list-style-type: none; 
    float:right; 
    text-align: center; 
    padding-right: 20px; 
} 
nav { 
    text-align: center; 
}

來源

2017-05-15 Modina Begum

你想他們垂直居中？ –

是的，我希望它垂直居中 –

我會用display: flex。它使這非常簡單。使用垂直居中並使用justify-content: space-between將徽標與導航區分開。然後，我還會將您的nav li的左側浮動，以便它們按順序排列。您也可以在那裏使用flex，但沒有必要。

body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 16px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    width: 80%; 
 
    margin: auto; 
 
    overflow: hidden 
 
} 
 

 
header { 
 
    background-color: #191919; 
 
    position: fixed; 
 
    width: 100%; 
 
    color: #edf9ff; 
 
    min-height: 70px; 
 
    border-bottom: #0fe216 3px solid; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 

 
header a { 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 

 
header ul { 
 
    margin: 0; 
 
} 
 

 
header li { 
 
    list-style-type: none; 
 
    float: left; 
 
    text-align: center; 
 
    padding-right: 20px; 
 
} 
 

 
nav { 
 
    text-align: center; 
 
}

<html> 
 

 
<head> 
 
    <title>Photography | Home </title> 
 
    <link href="app.css" rel="stylesheet" /> 
 
    <script type="application/javascript" src="on.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <header> 
 
    <div id="branding"> 
 
     <h2>PHOTOGRAPHY</h2> 
 
    </div> 
 
    <nav id="links"> 
 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">PHOTO GALLERY</a></li> 
 
     <li><a href="#">VIDEO GALLERY</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
    <section id="showcase"> 
 
    <div class="container"> 
 
     <h2>Photography</h2> 
 
     <p>Our photo's are always presente in the best quality possible with carefulness 
 
     </p> 
 
    </div> 
 
    </section> 
 
    <section class="boxes"> 
 
    <div class="container"> 
 
     <div class="box">asdasdsada 
 
     <img src="./images/CameraIcon.png"> 
 
     <h2>Photography</h2> 
 
     <p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p> 
 
     </div> 
 
     <div class="box"> 
 
     <img src="./images/CommunityICON.jpg"> 
 
     <h2>Guranteed!</h2> 
 
     <p>If you are not satisfied with our work you will have an 80% refund</p> 
 

 

 
     </div> 
 
     <div class="box"> 
 
     <img src="./images/TimeIcon.png"> 
 
     <h2>Time Managment</h2> 
 
     <p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p> 
 

 
     </div> 
 
    </div> 
 
    </section> 
 
    <footer> 
 
    <p>Note that any copyright &copy; is reserved</p> 
 
    </footer> 
 
</body> 
 

 
</html>

來源

2017-05-15 21:54:22

鏈接不在固定導航中居中

回答

相關問題