導航欄將div向下推至頁面

Question

首先，我的導航欄導致我的div向下推到頁面上，而在網站實際啟動之前留下一個白色的欄。 如何刪除該欄？

其次，我無法使svg圓垂直對齊。 我該怎么做呢？

這是我目前的代碼：

  @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200); body{ margin: 0 auto; font-family: 'Yanone Kaffeesatz', sans-serif; color: #FFFFFF; } header div{ background-image: url(http://eskipaper.com/images/sunset-dark-clouds-1.jpg); width: 100%; height: 375px; } header div nav ul li{ display: inline-block; float: right; padding-right: 10px; font-size: 25px; margin-top: 10px; margin-right: 10px; } header div nav ul li a{ text-decoration: none; color: #FFFFFF; } .circular { width: 200px; height: 200px; border-radius: 80px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url(http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg) no-repeat; margin-left: auto ; margin-right: auto ; } .circular img { opacity: 0; filter: alpha(opacity=0); } 

  <!-- Start of header --> <header id="header"> <div> <!-- Start of navigation bar --> <nav> <ul> <li><a href="#contact-wrapper">Contact</a></li> <li><a href="#about-wrapper">About</a></li> <li><a href="#header">Home</a></li> </ul> </nav> <!-- End of navigation bar--> <!-- Profile picture --> <div class="circular"> <!--<p id="name">Your name</p>--> <img src="#" alt="Me" /> </div> </div> </header> <!-- End of header --> 

Answer 1

好的，看起來<ul>的默認樣式正在使標頭向下移動。

ul {
  margin: 0;
}

您應該考慮使用基本的CSS文件，例如Normalizer 。

至於圓，可以使用絕對定位。

放置position: relative對於父元素。

然后加：

  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);

到.circular 。

請參閱下面的代碼段...

 @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200); body{ margin: 0 auto; font-family: 'Yanone Kaffeesatz', sans-serif; color: #FFFFFF; } header div{ background-image: url(http://eskipaper.com/images/sunset-dark-clouds-1.jpg); width: 100%; height: 375px; position: relative; } header ul { margin:0; } header div nav ul li{ display: inline-block; float: right; padding-right: 10px; font-size: 25px; margin-top: 10px; margin-right: 10px; } header div nav ul li a{ text-decoration: none; color: #FFFFFF; } .circular { width: 200px; height: 200px; border-radius: 80px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url(http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg) no-repeat; position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); } .circular img { opacity: 0; filter: alpha(opacity=0); } 

 <!-- Start of header --> <header id="header"> <div> <!-- Start of navigation bar --> <nav> <ul> <li><a href="#contact-wrapper">Contact</a></li> <li><a href="#about-wrapper">About</a></li> <li><a href="#header">Home</a></li> </ul> </nav> <!-- End of navigation bar--> <!-- Profile picture --> <div class="circular"> <!--<p id="name">Your name</p>--> <img src="#" alt="Me" /> </div> </div> </header> <!-- End of header --> 

Answer 2

首先，在<header> <div>內不需要<div> ，因為<header>本質上與<div>行為相同。

其次，除非您使用我們看不到的重置，否則<ul>帶有默認的margin-top和margin-bottom大約1em。 您需要重置為margin:0 。

header ul,
header ul li {
  margin: 0;
}

第三，由於您知道元素的固定尺寸，因此可以使用絕對定位和邊距垂直居中。

.circular {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px; /* half of 200px dimension */
    margin-top: -100px; /* half of 200px dimension */
}

工作示例： https : //jsfiddle.net/7uubayLu/