內嵌塊元素未水平對齊

Question

我無法水平對齊內嵌塊元素。從我發現的情況來看，線內塊元素有一些基線對齊，但我無法得到。 這是工作，如果我使用'vertical-align：top'。 我有以下疑點：

1. 是怎樣的基線定位在這個示例代碼。
2. 從.icon-bar類中刪除'display：inline-block'，第一個 三個元素正確對齊。怎麼樣？
3. 在將上一步之後的ul標記爲'display：inline'時，它會對齊。但不適用於'display：inline-block'
4. 如何水平對齊元素。可以在沒有「垂直對齊」屬性的情況下完成嗎？
5. 可以標記爲 的元素顯示：內聯元素的父元素顯示：塊。同樣，確實 'display：inline-block'parent and'display：block'child cause any problems？另外，'display：'display： inline-block'parent中的'display：block'子項是否擴展爲全頁寬度或父類 寬度？

body { 
 
    margin: 0; 
 
} 
 
div.header { 
 
    background-color: #f5df5f; 
 
    height: 50px; 
 
} 
 
.drawer_section, 
 
.logo_section, 
 
.search_section, 
 
.header_links_section { 
 
    //vertical-align: top; 
 
    height: 50px; 
 
    //border: 2px thick black; 
 
    display: inline-block; 
 
    background: green; 
 
    opacity: 0.5; 
 
} 
 
.drawer_section { 
 
    width: 100px; 
 
    text-align: center; 
 
} 
 
.logo_section, 
 
.search_section { 
 
    width: 200px; 
 
    text-align: center; 
 
} 
 
.drawer_icon { 
 
    display: inline-block; 
 
    width: 30px; 
 
    text-align: center; 
 
    //line-height: 3px; 
 

 
} 
 
.icon-bar { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 20px; 
 
    height: 5px; 
 
    border-bottom: 2px solid red; 
 
} 
 
.header_links_section > ul { 
 
    list-style: none; 
 
    background-color: red; 
 
    //display: inline; 
 
    display: inline-block; 
 
} 
 
.header_links_section > ul > li { 
 
    text-align: center; 
 
    display: inline-block; 
 
    background: yellow; 
 
    width: 35px; 
 
    //height: 15px; 
 
    //margin: 0 5px; 
 

 
}

<div class="header"> 
 
    <div class="drawer_section"> 
 
    <!-- <div class="drawer_icon">----</div> --> 
 
    <div class="drawer_icon"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </div> 
 
    </div> 
 

 
    <div class="info_section">Hi There</div> 
 

 
    <div class="search_section"> 
 
    <span class="search_bar"> 
 
\t \t \t \t <input type="text" name="search" 
 
\t \t \t \t \t placeholder="Search" /> 
 
     </span> 
 
    </div> 
 
    <div class="links_section"> 
 
    <ul> 
 
     <li><a href="#">Link1</a> 
 
     </li> 
 
     <li><a href="#">Link2</a> 
 
     </li> 
 
     <li><a href="#">Link3</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</div>

請查看這裏：http://codepen.io/anon/pen/ggByVv

Answer 1

把所有的章節下一個類名，這樣你就不必不斷添加類像下面。垂直對齊沒有設置它們根據div內容的大小

.drawer_icon,.logo_section,.search_section,.header_links_section { 
    vertical-align: top; 
    position: relative; 
    display: inline-block; 
}