CSS垂直對齊底部發行

Question

我試圖讓下面的佈局，HTML CSS &

|-----------------------------------------| 
|box 1         | 
|    -----------    | 
|    | box 3 |    | 
|---------------|   |---------------| 
|---------------|   |---------------| 
|box 2   |   |    | 
|    |   |    | 
|    |   |    | 
|---------------|---------|---------------| 

下面的代碼（像），

<div class="box-one"></div> 
<div class="box-two"> 
    <div class="box-three"></div> 
</div> 

.box-one { 
    border: 1px solid red; 
    height:50px; 
    width: 400px; 
} 
.box-two { 
    border: 1px solid green; 
    height:100px; 
    text-align : center; 
    vertical-align: bottom; 
    width: 400px; 
} 
.box-three { 
    border: 1px solid black; 
    height:120px; 
    width: 50px; 
} 

Demo jsFiddle

但似乎box-two，text-align : center; & vertical-align: bottom;不施加，所以輸出不如EXPE反恐執行局。任何想法如何解決這個問題？

Answer 1

默認這裏是演示http://jsfiddle.net/4a4aD/10/

DIV的display: block。要使用vertical-align css屬性，則需要開始使用屬性，如display: table-cell或display: inline-block。 text-align也不會影響塊元素，因此您添加的屬性不起作用。

但它看起來好像你在做不同的東西在那裏。你有box-3重疊box-1。因此，無論你需要給它一個負margin-top或開始使用絕對定位是這樣的：只有

.box-one { 
    border: 1px solid red; 
    height:50px; 
    width: 400px; 
} 
.box-two { 
    position: relative; 
    border: 1px solid green; 
    height:100px; 
    width: 400px; 
} 
.box-three { 
    position: absolute; 
    bottom: 0; 
    left: 175px; 
    border: 1px solid black; 
    height:120px; 
    width: 50px; 
} 

Answer 2

.box-three { 
    border: 1px solid black; 
    height:120px; 
    width: 50px; 
    margin: -21px auto 0 auto; 
} 

http://jsfiddle.net/4a4aD/7/

或者，有些更通用：

.box-two { 
    /* ... */ 

    position: relative; 
} 

.box-three { 
    /* ... */ 

    position: absolute; 
    left:0; 
    right:0; 
    margin-left:auto; 
    margin-right:auto; 
    bottom:0; 
} 

http://jsfiddle.net/4a4aD/9/

Answer 3

到中心，你只需要使用margin: auto;一個div。
因此，這將是這個樣子：
.box-three { margin: auto; border: 1px solid black; height:120px; width: 50px; }