垂直对齐跨度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>
我怎样才能使它所以所有的跨度是相同的垂直位置。我已将所有高度设置为所有相同的值
答
<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>
答
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>
答
对于现代浏览器,您可以使用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;
}
你试过所有包装'' S和定位该元素在中间取而代之的是,这个包装器会用最高的''进行扩展? –
什么是你的要求,你可以发布你想要的结果图像............... –