html - 如何在响应页面上的 div 中垂直和水平居中放置两个图像

Question

我正在使用 Skeleton 和 Normalize css。我想在 div 容器内将两个图像垂直和水平并排居中。当页面变窄时，我想要第一个图像底部的第二个图像，如下所示

Normal width:
img1 img2

Narrow view:
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;
}

使用此代码，它们以正常宽度垂直居中，但我无法在较窄的 View 中使图像彼此对齐。关于如何执行此操作的任何想法？

Answer 1

试试这个:

.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没有正确阅读..如果页面变窄，它们不会分开。

正如 François 指出的那样，将其添加到 css 中:

flex-wrap: wrap;

另一个编辑:显然 IE 对此有一些问题。在 .container (container_wrapper) 或其他东西周围做一个包装器。给它:

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

并确保您的 html 和正文设置为 100% 高度