垂直对齐跨度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

回答

相关问题