如何正確使用CSS「display：inline-block」？

我在使用這個html/css編碼時遇到了佈局問題。其實我想要符號垂直對齊div的中心。如何正確使用CSS「display：inline-block」？

第二個佈局顯示正常，浮動值設置爲在子div上保留。

第一個佈局有什麼問題。有任何想法嗎？

下面是代碼

<html> 
<head> 
<style type="text/css"> 

    div, p { 
     margin:0; 
     padding:0; 
    } 

    div.wrapper { 
     background: #FFFFFF; 
     border-radius: 3px; 
     padding: 20px; 
    } 

    /* LAYOUT 1 STYLE */ 
    div.list1 div { 
     display: inline-block; 
    } 

    div.thumb1 { 
     border:#3C6BBC 2px solid; 
     border-radius: 2px; 
     width: 120px; 
     height: 120px; 
    } 

    div.symbol1 { 
     font-size: 25px; 
     width: 20px; 
     height: 70px; 
     margin: 2px; 
     text-align: center; 
     padding-top:50px; 
    } 

    /* LAYOUT 2 STYLE */ 
    div.list2 { 
     overflow: hidden; 
    } 

    div.list2 div { 
     float: left; 
    } 

    div.thumb2 { 
     border:#3C6BBC 2px solid; 
     border-radius: 2px; 
     width: 120px; 
     height: 120px; 
    } 

    div.symbol2 { 
     font-size: 25px; 
     width: 20px; 
     height: 70px; 
     margin: 2px; 
     text-align: center; 
     padding-top:50px; 
    } 

</style> 
</head> 

<body> 

<div class="wrapper" id="layout1"> 
    <h1>MAIN HEADING</h1> 
    <h2>Sub Heading</h2> 

    <div class="list1"> 
     <div class="thumb1"></div> 
     <div class="symbol1"><p>+</p></div> 
     <div class="thumb1"></div> 
     <div class="symbol1"><p>+</p></div> 
     <div class="thumb1"></div> 
     <div class="symbol1"><p>=</p></div> 
     <div class="thumb1"></div> 
    </div> 
</div> 

<div class="wrapper" id="layout2"> 
    <h1>MAIN HEADING</h1> 
    <h2>Sub Heading</h2> 

    <div class="list2"> 
     <div class="thumb2"></div> 
     <div class="symbol2"><p>+</p></div> 
     <div class="thumb2"></div> 
     <div class="symbol2"><p>+</p></div> 
     <div class="thumb2"></div> 
     <div class="symbol2"><p>=</p></div> 
     <div class="thumb2"></div> 
    </div> 
</div> 

</body> 
</html>

來源

2012-10-04 Dipen Grg

請作的jsfiddle所以我們可以編輯 – Onheiron

只要給vertical-align:middle你到下面提到類

div.list1 div { 
    display: inline-block; 
    vertical-align: middle; 
}

Demo

來源

2012-10-04 09:03:10

如何正確使用CSS「display：inline-block」？

回答

相關問題