Question

我试图让我的子元素在其父元素上垂直居中。我的css代码有问题，但我无法说出它是什么：

的CSS：

#parent_div_1, #parent_div_2, #parent_div_3{
    width:90%;
    height:20%;
    margin-right:10px;
    border:2px solid #a1a1a1;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
    background:#dddddd;
    border-radius:25px;
    vertical-align:middle;
    margin:4px;
}
.child_div_1{
    float:left;
    margin-right:5px;
    border-radius: 2px;
    border:2px solid #a1a1a1;
    background:#dddddd;
    vertical-align:middle;
}

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

<div id='parent_div_1'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>

<div id='parent_div_2'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>

<div id='parent_div_3'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>

链接到我的JSFiddle：http://jsfiddle.net/wasingej/Y4FA5/

Answer 1

快速解决方案是设置

display: table;代表＃parent_div_1，＃parent_div_2，＃parent_div_3

和

display: table-cell; for .child_div_1

Answer 2

将display：inline-block添加到父div样式。

#parent_div_1, #parent_div_2, #parent_div_3{
    ...
    vertical-align:middle;
    display: inline-block;
    ...
}

JSFiddle：http://jsfiddle.net/9Y7Cm/5/

Answer 3

将Display:inline-block;添加到#parent_div_1, #parent_div_2, #parent_div_3上的css：

<强> CSS

#parent_div_1, #parent_div_2, #parent_div_3{
    width:90%;
    height:20%;
    margin-right:10px;
    border:2px solid #a1a1a1;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
    background:#dddddd;
    border-radius:25px;
    vertical-align:middle;
    margin:4px;
    display:inline-block; /* ADDED CSS */
}
.child_div_1{
    float:left;
    margin-right:5px;
    border-radius: 2px;
    border:2px solid #a1a1a1;
    background:#dddddd;
    vertical-align:middle;
}

DEMO HERE：http://jsfiddle.net/Y4FA5/21/

Answer 4

<style>
body{
padding: 0;
margin: 0;
    margin:0px auto;
}
#main{
    position: relative;
width:500px;
height:500px;
}
#abc{
text-align:center;
background-color:#0F0;
height:250px;
    display: table;
    width: 100%;
}

#abc span {
    vertical-align:middle;
    display: table-cell;
}
</style>
<div id="main">
    <div id="abc">
     <span>asdfasdfafasdfasdf<br/> sdfjdsl flkjdsflk sjdflkjdsf </span>    
    </div>

</div>

为什么赢得我的CSS元素中心？

4 个答案: