垂直對齊跨度Div

我有下面的代碼正在運行，以在屏幕中間創建三列居中。我遇到的問題是當我爲每個跨度添加不同數量的內容時，結果會比其他兩個內容高得多。主頁上的背景是黑色的，每個範圍都是白色的。垂直對齊跨度Div

<div style="width:100%; text-align:center; min-width:1200px;"> 
<span style="display: inline-block; width:300px; height:300px; background-color:#fff; "> 
     Content 
</span> 
<span style="display: inline-block; width:300px; height:300px; background-color:#fff;"> 
     Content 
</span> 

<span style="display: inline-block; width:300px; height:300px; background-color:#fff; margin:0px; padding:0px;"> 
     Content blah blah blah 
</span> 
</div>

我怎樣才能使它所以所有的跨度是相同的垂直位置。我已將所有高度設置爲所有相同的值

來源

2012-09-20 Somk

你試過所有包裝'' S和定位該元素在中間取而代之的是，這個包裝器會用最高的''進行擴展？ –

什麼是你的要求，你可以發佈你想要的結果圖像............... –

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 

body{ 
background:black; 
} 

.mydiv{ 
margin-left:100px; 
width:300px; 
float:left; 
} 
</style> 
</head> 
<body> 


<div style="width:100%; text-align:center; min-width:1200px;"> 

<div class="mydiv"><span style="display: inline-block; width:300px; background- color:#fff; "> 
     blahblah blah blah blahblah blah blah blahblah blah blah 
</span></div> 
<div class="mydiv"><span style="display: inline-block; width:300px; background-color:#fff;"> 
     Hello Wolrd!blah blah blahblah blah blah 
</span> 
</div> 
<div class="mydiv"><span style="display: inline-block; width:300px; background-color:#fff; margin:0px; padding:0px;"> 
     Content blah blah blah 
</span></div> 
</div> 

</body> 
</html>

來源

2012-09-20 12:20:40 Afshin

css屬性display: table-cell;vertical-align:middle將垂直居中。

<div style="width:100%; text-align:center; min-width:1200px;"> 
<span style="width: 300px; height: 300px; background-color: rgb(255, 255, 255); display: table-cell; vertical-align: middle;"> 
     Content 
</span> 
<span style=" width:300px; height:300px; background-color:#fff; display: table-cell; vertical-align: middle;"> 
     Content 
</span> 

<span style=" width:300px; height:300px; background-color:#fff; margin:0px; padding:0px; display: table-cell; vertical-align: middle;"> 
     Content blah blah blah 
</span> 
</div>

來源

2012-09-20 12:08:14 vusan

對於現代瀏覽器，您可以使用columns^{W3C docs} css屬性。

HTML

<div class="container"> 
    <div class="columns"> 
     All content 
    </div> 
</div>

CSS

.container{ 
    width:100%; 
    min-width:1200px; 
    background-color:black; 
} 
.columns{ 
    -moz-columns:300px 3; 
    -webkit-columns:300px 3; 
    columns:300px 3; 
    width:900px; 
    text-align:center; 
    background-color:white; 
    margin:0 auto; 
}

演示在http://jsfiddle.net/b2fNk/1

來源

2012-09-20 12:13:01

垂直對齊跨度Div

回答

相關問題