如何垂直對齊不同高度的div？

HTML

CSS

#wrap{margin: 0 auto; text-align: center; vertical-align: middle; border: 1px solid #000000;} 
.list{display: inline-block;margin: 0px 10px;} 

#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;} 
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;} 
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;} 
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;} 
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;} 
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}

fiddle

每個<div class="list">居然會擁有一個單獨的圖像，但是本作的目的，我設定的如果圖像在那裏，則寬度和高度應該高於div的高度。是的，我離開了重複的id，但實際上這些divs不會有id，只是這個class。

無論如何，我想讓這些div垂直對齊每一行。垂直對齊需要是動態的，以至於如果從行中刪除最高的框（即，#box3）（因爲調整大小的窗口將其移動到不同的行或者它們全部從HTML中移除），則行應相應調整（GE。如果#box3和#box5是在同一行，而其他行幾乎觸及#box3邊界，當所有#box3被刪除了其他線現在應該差不多觸及#box5境）

正如你可以看到我已經使用垂直對齊無濟於事。那麼我還需要其他什麼CSS？

來源

2015-11-05 Memor-X

您的文檔中不應該有重複的ID。您可以將多個類分配給一個元素：'class =「list box1」'。 – roeland

@roeland *「，是的，我離開了重複的id，但實際上這些divs不會有id，只有這個class。」* –

只需將vertical-align設置爲元素本身而不是包裝器。

CSS

#wrap{margin: 0 auto; text-align: center; border: 1px solid #000000; } 
.list{display: inline-block;margin: 0px 10px; vertical-align: middle;}

見DEMO

來源

2015-11-05 03:49:20

你可以使用Flexbox的達到預期的效果，如果你是好與當前Flexbox的瀏覽器的支持。

使用flexbox可以在每行中水平分佈圖像並將它們對齊到垂直中心。

/* Flex container */ 
 
.container{ 
 
    display:flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
} 
 
/* Each div inside container */ 
 
.container div{ 
 
    align-self: center; 
 
    margin:20px; 
 
} 
 

 
#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;} 
 
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;} 
 
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;} 
 
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;} 
 
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;} 
 
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}

<div class="container"> 
 
    <div id="box1"></div> 
 
    <div id="box2"></div> 
 
    <div id="box3"></div> 
 
    <div id="box4"></div> 
 
    <div id="box5"></div> 
 
    <div id="box6"></div> 
 
    <div id="box5"></div> 
 
    <div id="box3"></div> 
 
    <div id="box1"></div> 
 
    <div id="box4"></div> 
 
    <div id="box6"></div> 
 
    <div id="box2"></div> 
 
</div>

來源

2015-11-05 04:00:40 katzkode

#wrap{ 
    margin: 0 auto; 
    text-align: center; 
    border: 1px solid #000000; 
} 
.list{ 
    display: inline-block; 
    margin: 0px 10px; 
    vartical-align: middle; 
}

請儘量在.LIST類vartical對齊中間....

是這項工作？

來源

2015-11-05 05:04:57

如何垂直對齊不同高度的div？

回答

相關問題