Question

我正在尝试创建一个导航栏，该导航栏的标题居中，并链接到右侧站点上的其他页面，但是即使我使用的是text-align: center，标题似乎也不居中。为了使标题和指向其他页面的链接保持在同一行，我使用的是flexbox。这种方法有什么问题（例如text-align与flexbox不兼容）还是我的代码普遍存在问题？

这是我的HTML / CSS：

* {
  margin: 0;
  padding: 0;

}

body {
  background-color: orange;

}

nav {
  width: 100%;
  height: 60px;
  background-color: black;
  display: flex;
}

nav p {
  text-align: center;
  font-family: arial;
  color: white;
  font-size: 24px;
  line-height: 55px;
  float: left;
  padding: 0px 20px;
  flex: 1 0 auto;


}

nav ul {
  float: left;

}

nav ul li {
  float: left;
  list-style: none;
  position: relative; /* we can add absolute position in subcategories */



}

nav ul li a {
  display: block;
  font-family: arial;
  color: white;
  font-size: 14px;
  padding: 22px 14px;
  text-decoration: none;
}


nav ul li ul {
  display: none;
  position: absolute;
  background-color: black;
  padding: 5px; /* Spacing so that hover color does not take up entire chunk */
  border-radius: 0px 0px 4px 4px;

}

nav ul li:hover ul {
  /* This means when li is hovered, we want the unordered list inside list item to do something. */
  display: block;


}


nav ul li ul li{
  width: 180px; /* increases width so that all text can be fit */
  border-radius: 4px;


}

nav ul li ul li a:hover {
  background-color: #ADD8E6;

}

<!DOCTYPE html>
<html>
	
<head> 
	<link href="header+footer.css" rel = "stylesheet" type="text/css" />
	<title> The Novel Column - Book Reviews </title>

</head>
	

<body>

<nav>

	<p> The Novel Column </p>

	<ul>
		<li> <a href="#"> Content </a>
			<ul> 
				<li> <a href="#"> Subsection 1 </a> </li>
				<li> <a href="#"> Subsection 2 </a> </li>
				<li> <a href="#"> Subsection 3 </a> </li>
				<li> <a href="#"> Subsection 4 </a> </li>
			</ul>
		</li>
		<li> <a href="#"> About Us </a> </li>
	</ul>
	
</nav>





</body>




</html>

在此先感谢您的帮助！

Answer 1

解决此问题的最简单方法是给nav ul position: absolute。

请注意，这也会将其移动到标题的左侧，因此，您还想给它right: 0：

nav ul {
  position: absolute;
  right: 0;
}

这可以在下面看到：

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: orange;
}

nav {
  width: 100%;
  height: 60px;
  background-color: black;
  display: flex;
}

nav p {
  text-align: center;
  font-family: arial;
  color: white;
  font-size: 24px;
  line-height: 55px;
  float: left;
  padding: 0px 20px;
  flex: 1 0 auto;
}

nav ul {
  position: absolute;
  right: 0;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative;
  /* we can add absolute position in subcategories */
}

nav ul li a {
  display: block;
  font-family: arial;
  color: white;
  font-size: 14px;
  padding: 22px 14px;
  text-decoration: none;
}

nav ul li ul {
  display: none;
  position: absolute;
  background-color: black;
  padding: 5px;
  /* Spacing so that hover color does not take up entire chunk */
  border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul {
  /* This means when li is hovered, we want the unordered list inside list item to do something. */
  display: block;
}

nav ul li ul li {
  width: 180px;
  /* increases width so that all text can be fit */
  border-radius: 4px;
}

nav ul li ul li a:hover {
  background-color: #ADD8E6;
}

<body>
  <nav>
    <p> The Novel Column </p>
    <ul>
      <li> <a href="#"> Content </a>
        <ul>
          <li> <a href="#"> Subsection 1 </a> </li>
          <li> <a href="#"> Subsection 2 </a> </li>
          <li> <a href="#"> Subsection 3 </a> </li>
          <li> <a href="#"> Subsection 4 </a> </li>
        </ul>
      </li>
      <li> <a href="#"> About Us </a> </li>
    </ul>
  </nav>
</body>

Answer 2

请尝试一下。希望您的问题得到解决。

* {
  margin: 0;
  padding: 0;

}

body {
  background-color: orange;

}

nav {
  width: 100%;
  height: 60px;
  background-color: black;
  display: flex;
}

nav p {
  text-align: center;
  font-family: arial;
  color: white;
  font-size: 24px;
  line-height: 55px;
  float: left;
  padding: 0px 20px;
  flex: 1 0 auto;


}

nav ul {
  position: absolute;
  right: 0;

}

nav ul li {
  float: left;
  list-style: none;
  position: relative; /* we can add absolute position in subcategories */



}

nav ul li a {
  display: block;
  font-family: arial;
  color: white;
  font-size: 14px;
  padding: 22px 14px;
  text-decoration: none;
}


nav ul li ul {
  display: none;
  position: absolute;
  background-color: black;
  padding: 5px; /* Spacing so that hover color does not take up entire chunk */
  border-radius: 0px 0px 4px 4px;

}

nav ul li:hover ul {
  /* This means when li is hovered, we want the unordered list inside list item to do something. */
  display: block;


}


nav ul li ul li{
  width: 180px; /* increases width so that all text can be fit */
  border-radius: 4px;


}

nav ul li ul li a:hover {
  background-color: #ADD8E6;

}

<!DOCTYPE html>
<html>
	
  <head> 
    <link href="header+footer.css" rel = "stylesheet" type="text/css" />
    <title> The Novel Column - Book Reviews </title>

  </head>
  <body>
    <nav>
      <p> The Novel Column </p>
      <ul>
        <li> <a href="#"> Content </a>
          <ul> 
            <li> <a href="#"> Subsection 1 </a> </li>
            <li> <a href="#"> Subsection 2 </a> </li>
            <li> <a href="#"> Subsection 3 </a> </li>
            <li> <a href="#"> Subsection 4 </a> </li>
          </ul>
        </li>
        <li> <a href="#"> About Us </a> </li>
      </ul>
    </nav>
  </body>
</html>

Answer 3

文本位于中间，但是如果您仍然遇到问题，则可以直接在标题上使用中心标签。

例如

<h2><center>The Novel Column</center></h2>

这将确保它不会更改与其他文本的对齐方式。

希望有帮助！。：）

文字对齐：居中未正确居中

3 个答案: