垂直對齊紅色

有人可以請看看我的jsfiddle，看看你是否可以使紅色div在中間垂直對齊，並獲得紅色的div以及居中。你將不得不做出這樣的裝有紅色的div一定高度的股利垂直對齊紅色

<div class="container"> 
    <div class="row1"> 
     <div> 
      <div style="height:200px; width:725px; background-color:red; margin:0px auto">A</div> 

     </div> 
     <div></div> 
    </div> 
    <div class="row2"> 
     <div>B</div> 
     <div>C</div> 
    </div> 
</div> 

html, body { 
    height:100%; margin:0px; padding:0px  

} 
.container { 
    width: 100%; 
    height: 100%; 
    display:table;  
    position: relative; 
} 
.row1 { 
    display:table-row; 
    max-height: 425px; 
    background: pink; 
} 
.row1 div { 
    display:table-cell; 
    width:100%; 
} 
.row2 { 
    display:table-row; 
    height: 100%; 
} 
.row2 div { 
    width: 100%; 
    height: 100%; 
    float:left; 
    background: green; 
} 
.row2 div + div { 
    background: aqua; 
    width: 50%; 
    height: 100%; 
    position: absolute; 
    top:0; 
    right:0; 
} 
@media (max-width: 1024px) { 
    .row1 { 
     width: 100%; 
    } 
    .row1 div + div { 
     display: none; 
    } 
    .row2 div + div { 
     width:50% 
    } 
    .row2 div { 
     width: 50%; 
    } 
    .row2 div + div { 
     position: static; 
    } 
}

來源

2014-01-30 ONYX

想要這樣嗎？ http://jsfiddle.net/VL5dr/ –

沒有紅色的div需要由它的父母居中並且在中間垂直對齊 – ONYX

只是一個小變化，使您的table-cell規則只適用於你打電話什麼table-row的直接孩子：.row1 > div而不是.row1 div。請參閱更新：http://jsfiddle.net/Xgr3k/11/

這解決您的問題，除了現在您的旱廁有色格是雨後春筍般冒出來，只要您的寬度> 1024年發生的事情，因爲你的媒體查詢和該分區設置爲position: static。我不確定你想要做什麼。但是，基本上，要小心你的規則是如何在你的DOM中級聯的。祝你好運:)

來源

2014-01-30 03:31:08 Milimetric

好吧，我檢查了你做了什麼，並對百分比進行了修改，現在效果更好，但是現在的問題是，當您將面積最大化到最大時，它不會對齊，我如何解決這個問題。它幾乎完成，你可以幫助解決它http://jsfiddle.net/Xgr3k/13/ – ONYX

結帳我最後的評論和小提琴 – ONYX

K，這個工程，但水色div會導致你的問題。你定義這些規則的方式是很難考慮的。我會建議看看引導程序和這些類型的庫如何佈局。無論如何，祝你好運：http://jsfiddle.net/Xgr3k/16/ – Milimetric

垂直對齊紅色

回答

相關問題