Question

我正在为WooCommerce的店面主题创建一个子主题。我的问题在于导航栏，导航元素不会水平居中。请查看代码以及导航栏上的图像。导航div的背景颜色为红色，因此更容易识别问题。

.navbar {
	height: 70px;
	width: 100%;
	border-bottom: 1px solid black;
}

.logo p {
	color: #000;
	font-family: 'Fjalla One', sans-serif;
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
	height: 70px;
	line-height: 70px;
	letter-spacing: 1px;
	width: 120px;
}

.logo {
	display: inline-block;
	height: 70px;
}

.navigation {
	display: inline-block;
	margin-left: 5px;
	background-color: red;
}

.navigation li {
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 70px;
	font-size: 14px;
	font-family: "Open Sans", sans-serif;
	color: #333;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

.navigation li:hover {
	color: #D4B349;
}

<div class="navbar">

	<div class="logo"><p> Lorem </p></div>

	<div class="navigation">
		<li> Home </li>
		<li> About </li>
		<li> Contact </li>
	</div>
</div>

Answer 1

请注意您的inline-block元素未对齐的事实。所以我把它们垂直对齐。

另一件事是，您不需要height:70px，而是在父级上定义line-height: 70px，它会传播给子级。

.navbar {
	line-height: 70px;
	width: 100%;
	border-bottom: 1px solid black; /* Change */
}

.logo p {
	color: #000;
	font-family: 'Fjalla One', sans-serif;
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 1px;
	width: 120px;
}

.logo {
	display: inline-block;
	vertical-align: middle;
}

.navigation {
	display: inline-block;
	margin-left: 5px;
	background-color: red;
}

.navigation li {
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 70px;
	font-size: 14px;
	font-family: "Open Sans", sans-serif;
	color: #333;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

.navigation li:hover {
	color: #D4B349;
}

<div class="navbar">

	<div class="logo"><p> Lorem </p></div>

	<div class="navigation">
		<li> Home </li>
		<li> About </li>
		<li> Contact </li>
	</div>

</div>

Answer 2

我认为你想要最左边的徽标和最右边的社交图标。要实现这一点，我会使用：

.logo {     
  float:left;
}

.icons {
  float: right;
}

你也可以使用绝对位置。

现在您有两个选择：

对齐导航元素中心。为此，您必须将导航设置为text-align: center和display: block：

.navigation {
  display: block;
  margin-left: 0px;
  text-align: center;
  background-color: red;
}

您可以.navbar一个text-align: center：

.navbar {
  height: 70px;
  width: 100%;
  border-bottom: 1px solid black;
}

HTML / CSS Navbar垂直对齐问题

2 个答案: