如何在響應頁面上的div內垂直和水平居中兩個圖像

我正在使用Skeleton和Normalize css。我想要在div容器內垂直和水平並排放置兩個圖像。當頁面變得更窄，我想在第一個圖像的底部如下如何在響應頁面上的div內垂直和水平居中兩個圖像

正常寬度的2幅圖像： IMG1 IMG2

狹隘的觀點： IMG1 IMG2

這裏是我的代碼：

<div id="center"> 
    <div class="left"><img class="u-max-full-width" src="img1.jpg"></div>   
    <div class="right"><img class="u-max-full-width" src="img2.jpg"></div> 
    </div>

這裏是我的CSS：

#center { 
width: 100%; 
text-align: center; 
position: relative; 
display: table;} 
#center > div { 
display: table-cell; 
vertical-align: middle;} 

.left { 
width: 50%; 
height: 100%; 
text-align: center;} 

.right { 
width: 50%; 
height: 100%; 
text-align: center;}

使用此代碼，它們以正常寬度垂直居中，但無法在較窄的視圖中將圖像對齊到彼此之下。任何想法如何做到這一點？喬

來源

2016-09-14 citm09

試試這個：

.container { 
 
    text-align: center; 
 
    
 
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
 
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 

 
    -webkit-box-align: center; 
 
    -webkit-flex-align: center; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 

 
    height: 800px; 
 
}

<div class='container'> 
 

 
    <img src="//placehold.it/300x300" class="thumbnail" alt=""> 
 
    
 
    <img src="//placehold.it/300x300" class="thumbnail" alt=""> 
 

 
</div>

編輯： Sry基因沒有正確讀取.. 這些不分手，如果頁面變窄。

由於弗朗索瓦指出，這增加了CSS：

flex-wrap: wrap;

另一個編輯： 顯然IE有一些問題與此有關。圍繞.container（container_wrapper）或其他東西做一個包裝。給它：

display: flex; 
 
flex-direction: column; 
 
height: 100%;

，並確保您的HTML和身體都設置爲100％的高度

來源

2016-09-14 11:55:30

現在這兩個圖像做包裝一個低於其他類似的，我想，但兩件事情正在發生1）它爲中心的整個頁面，而不是僅僅用類「容器」的DIV上的所有內容，2）你使用的兩個圖像是300×300，使他們看起來不錯，但我的兩個圖像是同一高度的不是那麼它們不會在中間垂直對齊。它們在底部垂直對齊。 – citm09

我能夠對齊內容到離開，但我不能同時將圖像垂直對齊到中間。任何想法？ – citm09

如果我現在運行代碼片段，它就是你問的問題。我不知道爲什麼它不爲你工作.. –

隨着傑普麪包車Kakerken的代碼，只需添加屬性：

flex-wrap: wrap;

.container { 
 
    text-align:   center; 
 
    
 
    display: \t \t \t \t -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    display: \t \t \t \t -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
 
    display: \t \t \t \t -ms-flexbox; /* TWEENER - IE 10 */ 
 
    display: \t \t \t \t -webkit-flex; 
 
    display: \t \t \t \t flex; 
 
    
 
    justify-content:  center; 
 

 
    -webkit-box-align: \t center; 
 
    -webkit-flex-align: \t center; 
 
    -ms-flex-align: \t \t center; 
 
    -webkit-align-items: \t center; 
 
    align-items: \t \t \t center; 
 
    flex-wrap:   wrap; 
 

 
    height:    800px; 
 
}

<div class='container'> 
 

 
    <img src="//placehold.it/300x300" class="thumbnail" alt=""> 
 
    
 
    <img src="//placehold.it/300x300" class="thumbnail" alt=""> 
 

 
</div>

來源

2016-09-14 12:09:40

如何在響應頁面上的div內垂直和水平居中兩個圖像

回答

相關問題