Flexbox将项目垂直对齐到导航栏

时间：2017-01-19 18:12:12

标签： html css css3 flexbox

我正在尝试创建一个导航栏，并希望其内容在中心垂直对齐。我使用flex来执行此操作，但无法让项目在中心对齐。

#nav-container {
  width: 100%;
  height: 50px;
  overflow: hidden;
  background: #3498db;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 999;
}
#nav-container .container {
  max-width: 800px;
  position: relative;
  padding: 0 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.top-nav-logo {
  max-height: 35px;
  float: left;
}
ul.navmenu {
  margin: 0 0 0 50px;
  padding: 0;
  float: left;
}
ul.navmenu li {
  padding-right: 25px;
  display: inline;
}
<header id="nav-container">

  <div class="container">

    <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="My Site" class="top-nav-logo" />

    <ul class="navmenu">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>

  </div>

</header>

6 个答案:

答案 0 :(得分：2)

在这种情况下，只需在#nav-container .container上设置高度。

＆＃13;
＆＃13; 
#nav-container {
width: 100%;
height: 50px;
overflow: hidden;
background: #3498db;
top: 0;
left: 0;
position: fixed;
z-index: 999;
}
#nav-container .container {
max-width: 800px;
position: relative;
padding: 0 30px;
height: 50px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.top-nav-logo {
max-height: 35px;
float: left;
}
ul.navmenu {
margin: 0 0 0 50px;
padding: 0;
float: left;
}
ul.navmenu li {
padding-right: 25px;
display: inline;	
}
＆＃13; 
<header id="nav-container">
  
  <div class="container">
    
    <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="My Site" class="top-nav-logo" />
    
    <ul class="navmenu"><li>Home</li><li>About</li><li>Contact</li></ul>
  
  </div>
  
</header>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

将此添加到#nav-container（除了您当前的设置）：

display: flex;
align-items: center;

这会将.container置于#nav-container

内 

#nav-container {
width: 100%;
height: 50px;
overflow: hidden;
background: #3498db;
top: 0;
left: 0;
position: fixed;
z-index: 999;
display: flex;
align-items: center;
}
#nav-container .container {
max-width: 800px;
position: relative;
padding: 0 30px;

display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.top-nav-logo {
max-height: 35px;
float: left;
}
ul.navmenu {
margin: 0 0 0 50px;
padding: 0;
float: left;
}
ul.navmenu li {
padding-right: 25px;
display: inline;	
}
<header id="nav-container">
  
  <div class="container">
    
    <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="My Site" class="top-nav-logo" />
    
    <ul class="navmenu"><li>Home</li><li>About</li><li>Contact</li></ul>
  
  </div>
  
</header>

答案 2 :(得分：1)

我认为您需要添加的唯一提议是display: flex;到#nav-container。

事实上，这是我对您的代码所做的唯一更改。

＆＃13;
＆＃13; 
#nav-container {
width: 100%;
height: 50px;
overflow: hidden;
background: #3498db;
top: 0;
left: 0;
position: fixed;
z-index: 999;
display: flex; 
}
#nav-container .container {
max-width: 800px;
position: relative;
padding: 0 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.top-nav-logo {
max-height: 35px;
float: left;
}
ul.navmenu {
margin: 0 0 0 50px;
padding: 0;
float: left;
}
ul.navmenu li {
padding-right: 25px;
display: inline;	
}
＆＃13; 
<header id="nav-container">
  
  <div class="container">
    
    <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="My Site" class="top-nav-logo" />
    
    <ul class="navmenu"><li>Home</li><li>About</li><li>Contact</li></ul>
  
  </div>
  
</header>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

使＃nav-container内的容器填满其高度。

#nav-container .container {
    height: 100%;
}

jsfiddle demo：https://jsfiddle.net/cjrqjwav/

答案 4 :(得分：0)

默认情况下，弹性容器height的{​​{1}}为#nav-container .container，换句话说是包含内容的高度，因此auto在视觉上不起作用。

您可以将其设置为align-items或#nav-container .container { height: 100%; }，因为父height: inherit;具有固定的高度。

#nav-container
#nav-container {
  width: 100%;
  height: 50px;
  overflow: hidden;
  background: #3498db;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 999;
}
#nav-container .container {
  max-width: 800px;
  position: relative;
  padding: 0 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  height: 100%; /*added*/
}
.top-nav-logo {
  max-height: 35px;
  float: left;
}
ul.navmenu {
  margin: 0 0 0 50px;
  padding: 0;
  float: left;
}
ul.navmenu li {
  padding-right: 25px;
  display: inline;
}

否则，您可以使用嵌套的flexbox，将<header id="nav-container"> <div class="container"> <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="My Site" class="top-nav-logo" /> <ul class="navmenu"> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </div> </header>作为弹性容器，并将#nav-container作为弹性项目。

#nav-container .container

#nav-container .container {
  display: flex;
  align-items: center;
}

#nav-container {
  width: 100%;
  height: 50px;
  overflow: hidden;
  background: #3498db;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 999;
  display: flex; /*added*/
  align-items: center; /*added*/
}
#nav-container .container {
  max-width: 800px;
  position: relative;
  padding: 0 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.top-nav-logo {
  max-height: 35px;
  float: left;
}
ul.navmenu {
  margin: 0 0 0 50px;
  padding: 0;
  float: left;
}
ul.navmenu li {
  padding-right: 25px;
  display: inline;
}

答案 5 :(得分：0)

元素#nav-container也需要是一个flex容器。

我建议将您的图片包装在另一个元素中，例如div，以防止在成为弹性项目时出现任何不良行为。

您还可以通过删除所有不必要的浮动来进行一些清理，并使ul元素成为弹性容器。

#nav-container {
  width: 100%;
  height: 50px;
  overflow: hidden;
  background: #3498db;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 999;
  display: flex; /* Make parent container a flex-container as well*/
}
#nav-container .container {
  max-width: 800px;
  position: relative;
  padding: 0 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.top-nav-logo {
  max-height: 35px;
  vertical-align: middle; /* Use this instead of float: left; */
}
ul.navmenu {
  margin: 0 0 0 50px;
  padding: 0;
  /* Removed unnecessary float: left;*/
  list-style-type: none; /* Remove ul marker */
  display: flex; /* Make unordered list a flex-container */
  align-items: center; /* Align list items vertically */
}
ul.navmenu li {
  padding-right: 25px;
  /* Removed unncessary display property for flex-items */
}
<header id="nav-container">

  <div class="container">
    <div class="logo">
      <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="My Site" class="top-nav-logo" />
    </div>
    <ul class="navmenu">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>

  </div>

</header>

相关问题
最新问题