使用CSS進行垂直對齊（特定情況）

-2

我在一家小型公益組織的網站上兼職工作，並且遇到了一些需要對齊各種屏幕尺寸的div /元素的問題。使用CSS進行垂直對齊（特定情況）

我正在使用媒體查詢和填充以眼睛爲中心，但是這使得無法在窗口調整大小時使其工作。我想我知道使用填充百分比來填充元素並不是正確的選擇，但我對於正確的練習感到不知所措。

這裏是有問題的元件的截圖：

這裏是site。

我不會將圖像中的所有元素堆疊在標題中心的彼此頂部，但只能在較小的尺寸上堆疊，但我無法真正將CSS映射出來。任何人都可以將我指向正確的方向嗎？

謝謝

2016-08-04 c3066521

簡單，現代的技術：中心元素縱連橫與Flexbox的（http://stackoverflow.com/a/33049198/3597276） –

也許看看使用像http://getbootstrap.com/這樣的開箱即用的網格系統來爲您提供所需的對齊 – haxxxton

請提供[MCVE]（https://stackoverflow.com/help/mcve）。將來要改變的網站的鏈接對於未來的用戶是沒有用的。嘗試調試整個頁面是很痛苦的，如果在我們嘗試着解決發生了什麼的時候改變它，那更是如此。 –

有很多方法可以做到這一點。最簡單的方法可能是使用左側和右側的容器，將寬度設置爲50％並將它們左移。然後使用媒體查詢將它們放在一定的大小上。

CSS：

.half {float:left; width:50%; text-align:center;} 

@media screen and (max-width:800px) { 
    .half {width:auto; float:none;} 
}

HTML：

<div class="half"> 
    <img src="http://placehold.it/350x150"> 
</div> 
<div class="half"> 
    <img src="http://placehold.it/350x150"> 
</div>

像這樣JSFiddle

2016-08-04 04:43:52 user500665

回答