HTML/CSS Navbar垂直对齐问题

Question

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

Navbar Image | JSFiddle with code

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

 
.logo p { 
 
\t color: #000; 
 
\t font-family: 'Fjalla One', sans-serif; 
 
\t font-weight: 700; 
 
\t font-size: 30px; 
 
\t text-transform: uppercase; 
 
\t height: 70px; 
 
\t line-height: 70px; 
 
\t letter-spacing: 1px; 
 
\t width: 120px; 
 
} 
 

 
.logo { 
 
\t display: inline-block; 
 
\t height: 70px; 
 
} 
 

 
.navigation { 
 
\t display: inline-block; 
 
\t margin-left: 5px; 
 
\t background-color: red; 
 
} 
 

 
.navigation li { 
 
\t display: inline-block; 
 
\t padding-left: 10px; 
 
\t padding-right: 10px; 
 
\t line-height: 70px; 
 
\t font-size: 14px; 
 
\t font-family: "Open Sans", sans-serif; 
 
\t color: #333; 
 
\t text-align: center; 
 
\t text-transform: uppercase; 
 
\t cursor: pointer; 
 
} 
 

 
.navigation li:hover { 
 
\t color: #D4B349; 
 
}

<div class="navbar"> 
 

 
\t <div class="logo"><p> Lorem </p></div> 
 

 
\t <div class="navigation"> 
 
\t \t <li> Home </li> 
 
\t \t <li> About </li> 
 
\t \t <li> Contact </li> 
 
\t </div> 
 
</div>

Answer 1

注重事实，你inline-block元素没有对齐。 所以我把它们垂直对齐。

另一件事是，你不需要height:70px，而是定义line-height: 70px，父母，它会传播给孩子。

.navbar { 
 
\t line-height: 70px; 
 
\t width: 100%; 
 
\t border-bottom: 1px solid black; /* Change */ 
 
} 
 

 
.logo p { 
 
\t color: #000; 
 
\t font-family: 'Fjalla One', sans-serif; 
 
\t font-weight: 700; 
 
\t font-size: 30px; 
 
\t text-transform: uppercase; 
 
\t margin: 0; 
 
\t letter-spacing: 1px; 
 
\t width: 120px; 
 
} 
 

 
.logo { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
} 
 

 
.navigation { 
 
\t display: inline-block; 
 
\t margin-left: 5px; 
 
\t background-color: red; 
 
} 
 

 
.navigation li { 
 
\t display: inline-block; 
 
\t padding-left: 10px; 
 
\t padding-right: 10px; 
 
\t line-height: 70px; 
 
\t font-size: 14px; 
 
\t font-family: "Open Sans", sans-serif; 
 
\t color: #333; 
 
\t text-align: center; 
 
\t text-transform: uppercase; 
 
\t cursor: pointer; 
 
} 
 

 
.navigation li:hover { 
 
\t color: #D4B349; 
 
}

<div class="navbar"> 
 

 
\t <div class="logo"><p> Lorem </p></div> 
 

 
\t <div class="navigation"> 
 
\t \t <li> Home </li> 
 
\t \t <li> About </li> 
 
\t \t <li> Contact </li> 
 
\t </div> 
 

 
</div>

Answer 2

我asume要远远离开的徽标和社会图标最右边。要做到这一点，我会用：

.logo {  
    float:left; 
} 

.icons { 
    float: right; 
} 

你也可以使用绝对位置。

现在你有两个选择：

1. 对准导航元素中心。要做到这一点，你必须导航设置为text-align: center和display: block：

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

2. 你可以给一个.navbartext-align: center：

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