Div內的垂直對齊范圍
[英]Vertical align Span within 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>
如何使所有跨度都處於相同的垂直位置。 我已經將高度設置為所有相同的值
3 個解決方案
解決方案1
5 2012-09-20 12:08:14
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>
解決方案2
0 2012-09-20 12:13:01
對於現代瀏覽器，您可以使用W3C docs css屬性columns 。
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;
}
解決方案3
0 已采納 2012-09-20 12:20:40
<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-div中的垂直對齊范圍
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.