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垂直對齊問題

回答

相關問題