Question

您好我正在尝试将“container2”div与“cointainer”的底部对齐，但我遇到了麻烦，我不知道在哪里，有什么帮助吗？

HTML

<div id="container">

     <div id="container2">
         <p>Text</p>
    </div>
</div>

CSS

#container{
/*Colors*/
background-color:rgb(129, 159, 255);
/*Size Box*/
width:400px;
height:200px;
margin:0 auto;
overflow:auto; }

 #container2{
 /*Colors*/
 background-color:black;
 color:white;
 /*Size Box*/
 width:50%;
 height:50%;
 padding:20px;
 margin:0 auto;
 overflow:auto;  }

http://jsfiddle.net/G4GT4/1/

Answer 1

使用当前结构，您必须使用position:absolute定位孩子。

<强> JSfiddle Demo

<强> CSS

#container{
    /*Colors*/
    background-color:rgb(129, 159, 255);

    /*Size Box*/
    width:400px;
    height:200px;

    margin:0 auto;
    overflow:auto;
    position: relative;


}

#container2{
    /*Colors*/
    background-color:black;
    color:white;

    /*Size Box*/
    width:50%;
    height:50%;

    padding:20px;
    margin:0 auto;
    overflow:auto; 
    position: absolute;
    bottom:0;
    left:50%;
    margin-left: -25%;

}

Answer 2

添加

#container { position: relative; }
#container2 { position: absolute; bottom: 0; }

或者只是使用表格

Answer 3

Demo

#container {
    background-color:rgb(129, 159, 255);
    display: table-cell;
    width:400px;
    height:200px;
    margin:0 auto;
    overflow:auto;
    text-align: center;
    vertical-align: bottom;
}
#container2 {
    background-color:black;
    color:white;
    /*Size Box*/
    width:50%;
    height:50%;
    padding:20px;
    margin:0 auto;
    overflow:auto;
    display: inline-block;
}

Answer 4

你必须设置margin-top（你知道两个高度）或使用定位，我选择了第二个变体。

#container {postition: relative}
#container2 {position: absolute; bottom: 0; left: 25%;}

http://jsfiddle.net/G4GT4/2/

Answer 5

您可以设置相对于container2的位置

工作小提琴here

#container2{
    /*Colors*/
    position: relative;
    top: 15%;
    background-color:black;
    color:white;

    /*Size Box*/
    width:50%;
    height:50%;

    padding:20px;
    margin:0 auto;
    overflow:auto; 

}

Answer 6

如果你不想使用绝对位置;你可以这样做：

fiddle

CSS

#container{
    text-align:center;
}
#container:before {
    content:"";
    height:100%;
    display:inline-block;
    vertical-align:bottom;
}
#container2{
    display:inline-block;
    vertical-align:bottom;
}

我在尝试使用CSS垂直对齐div时遇到了麻烦

6 个答案:

CSS