Question

首先，我的导航栏导致我的div被推下页面，在网站实际启动之前留下一个白条。如何删除此栏？

其次，我不能让svg圆圈垂直对齐。我该怎么做？

这是我目前的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

好的，所以看起来<ul>的默认样式会导致标题向下移动。

ul {
  margin: 0;
}

您应该考虑使用像Normalizer这样的基本CSS文件。

至于圆圈，你可以使用绝对定位。

将position: relative放在父元素上。

然后添加：

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

至.circular。

请参阅下面的代码段......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，您不需要<div>内的<header>，因为<header>基本上与<div>的行为相同。

其次，除非您使用我们无法看到的重置，否则<ul>会提供约1em的默认margin-top和margin-bottom。您需要重置为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/

导航栏按下div页面

2 个答案: