Question

我希望我的（（#banner_citrus_web_design p {））<p>在中心对齐，但由于某种原因它有一个奇怪的缩进。检查我的代码，看看会发生什么事？

奇怪的缩进发生在我的段落元素中，并且真的希望段落元素能够回到中心位置。

＆＃13;

* {
	margin:0;
	}

body {
	background: #E6E6E6;
	}
	
#head_wrapper {
	background:#000;
	}
	
#head_wrapper h1 {
	display: inline; 
	float: left; 
	margin: -3px 20px 20px;
	color: white;
	font-family: 'Pacifico';
	font-weight:100;
	}

#head_wrapper #nav_ul {
	text-align: right;
	}
	
#head_wrapper #nav_ul li {
	list-style-type:none;
	display: inline-block;
	margin: 15px 15px 20px;
	}
	
#head_wrapper #nav_ul li a {
	text-decoration:none;
	color:white;
	font-family: 'Lato', sans-serif;
	}
	
#head_wrapper #nav_ul li #link_hover:hover {
	background:#FF9933;
	border-radius:10%;
	}
	
#banner_citrus_web_design {
	background:#000;
	height:400px;
	}

#banner_citrus_web_design p {
	color:gray;
	margin:0 auto;
	}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Citrus</title>
		<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="css/main.css">
	</head>
	
	<body>
		<header id="head_wrapper">
			<h1>Citrus</h1>
				<nav id="nav_bar">
					<ul id="nav_ul">
						<li>
							<div id="link_hover">
								<a href="#">
									Home
								</a>
							</div>
						</li>
						<li>
							<div id="link_hover">
								<a href="#">
									Services
								</a>
							</div>
						</li>
						<li>
							<div id="link_hover">
								<a href="#">
									Work
								</a>
							</div>
						</li>
						<li>
							<div id="link_hover">
								<a href="#">
									Contact
								</a>
							</div>
						</li>
					</ul>
				</nav>
		</header>
		
		<section id="banner_citrus_web_design">
			<p>CITRUS WEB DEVELOPMENT</p>
		</section>
	</body>
</html>

＆＃13;

Answer 1

在clear:both;

中添加#banner_citrus_web_design {

Answer 2

你应该使用“text-align：center;”在“margin：0 auto;”的地方对于<p>代码。

* {
margin:0;
}

body {
background: #E6E6E6;
}

#head_wrapper {
background:#000;
}

#head_wrapper h1 {
display: inline; 
float: left; 
margin: -3px 20px 20px;
color: white;
font-family: 'Pacifico';
font-weight:100;
}

#head_wrapper #nav_ul {
text-align: right;
}

#head_wrapper #nav_ul li {
list-style-type:none;
display: inline-block;
margin: 15px 15px 20px;
}

#head_wrapper #nav_ul li a {
text-decoration:none;
color:white;
font-family: 'Lato', sans-serif;
}

#head_wrapper #nav_ul li #link_hover:hover {
background:#FF9933;
border-radius:10%;
}

#banner_citrus_web_design {
background:#000;
height:400px;
}

#banner_citrus_web_design p {
color:gray;
text-align: center;
}

我的<p>路线发生了什么变化？

2 个答案: