如何在响应式页面上的 div 内垂直和水平居中两个图像

Posted 2023-03-13

【中文标题】如何在响应式页面上的 div 内垂直和水平居中两个图像

【英文标题】：How to vertically and horizontally center two images inside a div on a responsive page

【发布时间】：2017-01-22 04:50:49

【问题描述】：

我正在使用 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;

使用此代码，它们以正常宽度垂直居中，但我无法在较窄的视图中使图像在彼此下方对齐。关于如何做到这一点的任何想法？

【参考方案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" >
   
   <img src="//placehold.it/300x300" class="thumbnail" >

</div>

编辑： Sry 没有正确阅读.. 如果页面变窄，这些不会分解。

正如弗朗索瓦指出的那样，将其添加到 css 中：

flex-wrap: wrap;

另一个编辑： 显然 IE 对此有一些问题。围绕 .container (container_wrapper) 或其他东西制作一个包装器。给它：

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

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

【讨论】：

现在这两个图像确实像我想要的那样将一个包裹在另一个下面，但是发生了两件事 1) 它已将整个页面上的所有内容居中，而不仅仅是具有类 'container' 的 div，2 ）您使用了两个 300x300 的图像，因此它们看起来不错，但是我的两个图像的高度不同，因此它们在中间没有垂直对齐。它们在底部垂直对齐。

我能够将内容左对齐，但我无法将两个图像垂直对齐到中间。有什么想法吗？

如果我运行代码 sn -p 现在的情况，这正是您所要求的。我不知道为什么它不适合你..

它在 Firefox 和 Chrome 中完美运行，但在 IE 8-Edge 中无法运行。在您的代码中，尝试更改其中一张图片的高度。

如果我将 display:table 添加到容器并将 display:table-cell 添加到图像，IE 可以正常显示，但图像会堆叠在 Chrome 中。

【参考方案2】：

使用 Jip van Kakerken 的代码，只需添加属性：

flex-wrap: wrap;

.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;

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

  height:               800px;

<div class='container'>

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

</div>