CSS3垂直对齐问题

所以我遇到的问题是LOGO不响应垂直对齐：中间和无序列表元素工作得很好，如何解决这个问题？在此先感谢CSS3垂直对齐问题

我的HTML代码：

<body> 
    <header> 
     <nav> 
      <div class="innerContainer"> 
       <div class="leftSide">Logo</div> 
       <div class="rightSide"> 
        <ul> 
         <li>Label</li> 
         <li>Label</li> 
         <li>Label</li> 
         <li class="btn">SIGN IN</li> 
        </ul> 
       </div> 
      </div>  
     </nav> 
    </header> 
</body>

我的CSS代码：

.innerContainer{ 
    vertical-align: middle; 
    padding: 2%; 
    width: 80%; 
    margin: auto; 
    overflow: auto; 
} 

header .rightSide{ 
    float: right; 
} 

header .leftSide{ 
float:left; 
}

来源

2017-02-15 Oscar

使用display: flex与justify-content: space-between使元素出现在左/右，然后用到中心他们垂直。

.innerContainer { 
 
    padding: 2%; 
 
    width: 80%; 
 
    margin: auto; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
}

<header> 
 
    <nav> 
 
    <div class="innerContainer"> 
 
     <div class="leftSide">Logo</div> 
 
     <div class="rightSide"> 
 
     <ul> 
 
      <li>Label</li> 
 
      <li>Label</li> 
 
      <li>Label</li> 
 
      <li class="btn">SIGN IN</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</header>

来源

2017-02-15 17:24:43

哦，是的！ :)它的工作原理非常完美，非常感谢，只要系统允许我这样做，我会将其标记为答案;） – Oscar

@Oscar真棒没问题！ –

CSS3垂直对齐问题

回答

相关问题