将 div 内的图像与响应高度垂直对齐

Question

我有以下代码设置了一个容器，该容器的高度在重新调整浏览器大小时随宽度变化（以保持方形纵横比）。

HTML

 <div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

 .responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

如何垂直对齐容器内的 IMG？我所有的图像都有可变的高度，容器不能有固定的高度/行高，因为它是响应式的……请帮忙！

原文由 user1794295 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一种同时水平和垂直对齐 parent 内的内联元素的技术：

垂直对齐

1） 在这种方法中，我们创建一个 inline-block （伪）元素作为 parent 的第一个（或最后一个）子元素，并将其 height 属性设置为 100% 取 其父 级的所有高度。

2) 此外，添加 vertical-align: middle 将 inline(-block) 元素保持在行空间的中间。因此，我们将 CSS 声明添加到 first-child 和 _我们的元素_（ _图像_）中。

3) 最后，为了去除 inline(-block) 元素之间的空白字符，我们可以通过 font-size: 0; 将 父 元素的字体大小设置为零。

注意： 我在下面使用了 Nicolas Gallagher 的 图像替换技术。

有什么好处？

• 容器 ( parent ) 可以具有动态尺寸。

• 无需明确指定图像元素的尺寸。

• 我们可以很容易地使用这种方法来 垂直对齐 <div> 元素；它可能具有动态内容（高度和/或宽度）。但请注意，您必须重新设置 --- 的 div font-size 属性才能显示内部文本。 在线演示。

 <div class="container">
    <div id="element"> ... </div>
</div>

 .container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

输出

响应式容器

本节不会回答这个问题，因为 OP 已经知道如何创建响应式容器。但是，我将解释它是如何工作的。

为了使容器元素的 高度 随其 宽度 变化（考虑纵横比），我们可以为顶部/底部 padding 属性使用百分比值。

顶部/底部填充或边距的 百分比值 相对于包含块的宽度。

例如：

 .responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

这是 在线演示。注释掉底部的行并调整面板大小以查看效果。

此外，我们可以将 padding 属性应用于 虚拟 子元素或 :before / :after 伪元素以实现相同的结果。但 请注意，在这种情况下， padding 上的百分比值是相对于 .responsive-container 本身的 宽度 的。

 <div class="responsive-container">
  <div class="dummy"></div>
</div>

 .responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

演示 #1 。

演示#2 （使用 :after 伪元素）

添加内容

使用 padding-top 属性会在 容器 内的内容顶部或底部 产生巨大的空间。

为了解决这个问题，我们用包装元素包装内容，使用 绝对定位 从文档正常流中删除该元素，最后展开包装（bu使用 top ， right , bottom 和 left 属性）填充其父 容器 的整个空间。

开始了：

 .responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

这是 在线演示。

---

齐聚一堂

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>

 .img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

这是 工作演示。

显然，您可以避免使用 ::before 伪元素以实现 浏览器兼容性，并创建一个元素作为 .img-container 的第一个子元素：

 <div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>

 .img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

更新演示。

使用 max-* 属性

为了使框内的图像保持较低的宽度，您可以在图像上设置 max-height 和 max-width 属性：

 .img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

这是更新的 演示。

原文由 Hashem Qolami 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 flexbox 这很容易：

小提琴

只需将以下内容添加到图像容器中：

 .img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex; /* add */
    justify-content: center; /* add to align horizontal */
    align-items: center; /* add to align vertical */
}

原文由 Danield 发布，翻译遵循 CC BY-SA 3.0 许可协议