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

【问题标题】：Align <h1> with <nav> in Html5在 Html5 中将 <h1> 与 <nav> 对齐
【发布时间】：2017-01-14 04:42:25
【问题描述】：

你能帮我调整一下这些线条吗？

我只是想将 ("LOGO") 与 ("ITEM 1 - ITEM 2 -ITEM 3") 对齐，但我做得不好。你知道如何修改css文件才能做到吗？

这是我的带有 sn-p 的代码：

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>

谢谢！

【问题讨论】：

您是要垂直对齐还是水平对齐？
align 表示你想全部在同一行？
垂直@nicholas79171
没错！ @Rohit

标签： css html text-align

【解决方案1】：

在#second-nav 上使用display: flex，在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>

【讨论】：

不错的版本！ Flex 很棒！

【解决方案2】：

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>

【讨论】：

谢谢！ @Quertiy
@TimPoret，如果此答案解决了您的问题，请单击其左侧的复选标记接受它。顺便说一句，您可以为徽标和/或导航部分添加任何所需的边距（包括 0）。
@TimPoret，或者用 flexbox 回答。

【解决方案3】：

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

【讨论】：

请尝试在您的回答中提供上下文。一个独立的答案可能会解决这个特定场景中的问题，但一个解释可能会解决许多未来的问题。尝试包括您认为导致问题的原因以及为什么您的答案会解决问题。

【解决方案4】：

将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】：

您可以将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>

【讨论】：

【解决方案6】：

浏览器默认为某些元素添加样式。在这种情况下，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>

【讨论】：

是否可以在黑色部分和徽标之间留出更多空间，并且物品也可以相同？
字体大小不同，所以边距没有帮助。
它只需要填充。