在Html5中将<h1>与<nav>对齐

时间：2017-01-13 16:35:34

标签： html css html5 text-align

你可以帮我调整一下吗？

我只是试图将（“LOGO”）与（“ITEM 1 - ITEM 2 -ITEM 3”）对齐，但我做得不好。你知道如何修改css文件吗？

这里有我的代码片段：

body{
    margin: 0;
	padding: 0;
	background-color: gray;
}

main {
	margin: 0 auto;
	width: 80%;
	background-color: #FFFFFF;
}

#first-nav {
	background-color: #000;
	color: #FFF;
	padding: 6px 1em;
}

	#first-nav a {
		color: #FFF;
		padding-right: 1em;
	}
	
#second-nav {
	padding: 4px 1em;
	height: 100px;
}

	#second-nav h1 {
		font-size: 150%;
		display: inline-block;
	}
		
	#main-navigation {
		float: right;
	}

		#main-navigation a {
			color: #000;
			padding-left: 1em;
		}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<main>
			<section id="navigation">
				<nav id="first-nav">
					<a href="#">element 1</a>
					<a href="#">element 2</a>
					<a href="#">element 3</a>
				</nav>
				<section id="second-nav">
					<h1>LOGO</h1>
					<nav id="main-navigation">
						<a href="#">ITEM 1</a>
						<a href="#">ITEM 2</a>
						<a href="#">ITEM 3</a>
					</nav>
				</section>
			</section>
		</main>
	</body>
</html>

谢谢！

6 个答案:

答案 0 :(得分：2)

使用display: flex上的#second-nav align-items: center;和margin-left: auto;上的#main-navigation：

body {
  margin: 0;
  padding: 0;
  background-color: gray;
}
main {
  margin: 0 auto;
  width: 80%;
  background-color: #FFFFFF;
}
#first-nav {
  background-color: #000;
  color: #FFF;
  padding: 6px 1em;
}
#first-nav a {
  color: #FFF;
  padding-right: 1em;
}
#second-nav {
  padding: 4px 1em;
  height: 100px;
  display: flex;
  align-items: center;
}
#second-nav h1 {
  font-size: 150%;
}
#main-navigation {
  margin-left: auto;
}
#main-navigation a {
  color: #000;
  padding-left: 1em;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <main>
    <section id="navigation">
      <nav id="first-nav">
        <a href="#">element 1</a>
        <a href="#">element 2</a>
        <a href="#">element 3</a>
      </nav>
      <section id="second-nav">
        <h1>LOGO</h1>
        <nav id="main-navigation">
          <a href="#">ITEM 1</a>
          <a href="#">ITEM 2</a>
          <a href="#">ITEM 3</a>
        </nav>
      </section>
    </section>
  </main>
</body>

</html>

答案 1 :(得分：1)

body{
  margin: 0;
  padding: 0;
  background-color: gray;
}

main {
  margin: 0 auto;
  width: 80%;
  background-color: #FFFFFF;
}

#first-nav {
  background-color: #000;
  color: #FFF;
  padding: 6px 1em;
}

#first-nav a {
  color: #FFF;
  padding-right: 1em;
}

#second-nav {
  padding: 4px 1em;
  height: 100px;
  text-align: justify;
}

#second-nav h1 {
  font-size: 150%;
}

#second-nav h1, #second-nav nav {
  display: inline-block;
  vertical-align: middle;
}

#second-nav:after {
  content: "";
  display: inline-block;
  width: 100%;
}

#main-navigation a {
  color: #000;
  padding-left: 1em;
}
<main>
  <section id="navigation">
    <nav id="first-nav">
      <a href="#">element 1</a>
      <a href="#">element 2</a>
      <a href="#">element 3</a>
    </nav>
    <section id="second-nav">
      <h1>LOGO</h1>
      <nav id="main-navigation">
        <a href="#">ITEM 1</a>
        <a href="#">ITEM 2</a>
        <a href="#">ITEM 3</a>
      </nav>
    </section>
  </section>
</main>

答案 2 :(得分：0)

默认情况下，浏览器会向某些元素添加样式。在这种情况下，H1应用了保证金。我删除了它。

body{
    margin: 0;
	padding: 0;
	background-color: gray;
}

main {
	margin: 0 auto;
	width: 80%;
	background-color: #FFFFFF;
}

#first-nav {
	background-color: #000;
	color: #FFF;
	padding: 6px 1em;
}

	#first-nav a {
		color: #FFF;
		padding-right: 1em;
	}
	
#second-nav {
	padding: 15px 1em 4px 1em; /* Add more space to top of nav */
	height: 100px;
}

	#second-nav h1 {
		font-size: 150%;
		display: inline-block;
                margin: 0; /* Remove the margin */
	}
		
	#main-navigation {
		float: right;
                padding-top: .25em; /* pad the top to align right nav */
	}

		#main-navigation a {
			color: #000;
			padding-left: 1em;
		}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<main>
			<section id="navigation">
				<nav id="first-nav">
					<a href="#">element 1</a>
					<a href="#">element 2</a>
					<a href="#">element 3</a>
				</nav>
				<section id="second-nav">
					<h1>LOGO</h1>
					<nav id="main-navigation">
						<a href="#">ITEM 1</a>
						<a href="#">ITEM 2</a>
						<a href="#">ITEM 3</a>
					</nav>
				</section>
			</section>
		</main>
	</body>
</html>

答案 3 :(得分：0)

将margin-top:0px设为 h1 徽标。

答案 4 :(得分：0)

将margin:0设为h1。默认情况下，浏览器会为HTML元素添加边距，因此您需要根据自己的要求进行调整。

body{
    margin: 0;
	padding: 0;
	background-color: gray;
}

main {
	margin: 0 auto;
	width: 80%;
	background-color: #FFFFFF;
}

#first-nav {
	background-color: #000;
	color: #FFF;
	padding: 6px 1em;
}

	#first-nav a {
		color: #FFF;
		padding-right: 1em;
	}
	
#second-nav {
	padding: 4px 1em;
	height: 100px;
}

	#second-nav h1 {
		font-size: 150%;
		display: inline-block;
        margin:0;
	}
		
	#main-navigation {
		float: right;
	}

		#main-navigation a {
			color: #000;
			padding-left: 1em;
		}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<main>
			<section id="navigation">
				<nav id="first-nav">
					<a href="#">element 1</a>
					<a href="#">element 2</a>
					<a href="#">element 3</a>
				</nav>
				<section id="second-nav">
					<h1>LOGO</h1>
					<nav id="main-navigation">
						<a href="#">ITEM 1</a>
						<a href="#">ITEM 2</a>
						<a href="#">ITEM 3</a>
					</nav>
				</section>
			</section>
		</main>
	</body>
</html>

答案 5 :(得分：0)

您可以将display:table用于section元素，将display:table-cell用于其子元素。

body{
    margin: 0;
	padding: 0;
	background-color: gray;
}

main {
	margin: 0 auto;
	width: 80%;
	background-color: #FFFFFF;
}

#first-nav {
	background-color: #000;
	color: #FFF;
	padding: 6px 1em;
}

	#first-nav a {
		color: #FFF;
		padding-right: 1em;
	}
	
#second-nav {
	padding: 4px 1em;
	height: 100px;
display:table;
}

	#second-nav h1 {
		font-size: 150%;
		display: table-cell;
	}
		
	#main-navigation {
		display:table-cell;
	}

		#main-navigation a {
			color: #000;
			padding-left: 1em;
		}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<main>
			<section id="navigation">
				<nav id="first-nav">
					<a href="#">element 1</a>
					<a href="#">element 2</a>
					<a href="#">element 3</a>
				</nav>
				<section id="second-nav">
					<h1>LOGO</h1>
					<nav id="main-navigation">
						<a href="#">ITEM 1</a>
						<a href="#">ITEM 2</a>
						<a href="#">ITEM 3</a>
					</nav>
				</section>
			</section>
		</main>
	</body>
</html>

相关问题
最新问题