中心div內聯塊
[英]Center div inline-block
問題描述
我有兩個div
<html>
<head>
<title></title>
<style type="text/css">
#div1 {
width: 45%; height: 500px;
margin-right:2.5%;
margin-top: 30px;
background-color: red;
display: inline-block;
}
#div2 {
width: 45%; height: 300px;
margin-right:2.5%;
margin-top: 30px;
background-color: blue;
display: inline-block;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
給我這個
http://i.imgur.com/pQcHqfo.png
正如你可以看到我的第二個（小）div在另一個的底部，我怎樣才能將它放在中心位置。
我試圖將它們放在另一個div中並使用vertical-align：minddle
2 個解決方案
解決方案1
2 已采納 2015-05-03 11:16:07
您只需要將vertical-align: middle添加到兩個div中，藍色將垂直居中顯示。 見這里： http ： //codepen.io/alexbaulch/pen/LVVqzG
解決方案2
1 2015-05-03 11:17:43
為了使用vertical-align：middle; 你需要設置display：inline或display：inline-block，這兩個一起去。
#div1 { width: 45%; height: 500px; margin-right:2.5%; margin-top: 30px; background-color: red; display: inline-block; vertical-align: middle; } #div2 { width: 45%; height: 300px; margin-right:2.5%; margin-top: 30px; background-color: blue; display: inline-block; vertical-align: middle; }
<div id="div1"></div> <div id="div2"></div>
無法將父級內聯塊DIV與子級內聯塊DIV居中
[英]Can't center a parent inline-block DIV with a child Inline-block DIV inside
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.