垂直对齐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？我的所有图像都有不同的高度,容器不能有固定的高度/线高,因为它的响应...请帮忙!

Answer 1

这是一种在父级内部同时水平和垂直对齐内联元素的技术:

垂直对齐

1)在这种方法中,我们创建了一个inline-block(伪)元素作为第一(或最后)的孩子家长,并设置其height属性为100%采取其整个高度父.

2)此外,添加vertical-align: middle将内联(-block)元素保留在行间距的中间.因此,我们将CSS声明添加到第一个子元素和我们的元素(图像).

3)最后,为了删除内联(-block)元素之间的空格字符,我们可以将父级的字体大小设置为零font-size: 0;.

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

有什么好处？

• 容器(父)可以具有动态尺寸.

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

• 我们可以轻松地使用这种方法垂直对齐<div>元素 ; 它可以具有动态内容(高度和/或宽度).但请注意,您必须重新设置其font-size属性div才能显示内部文本.在线演示.

<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已经知道如何创建响应式容器,因此本节不会回答这个问题.但是,我会解释它是如何工作的.

为了使容器元素的高度随其宽度(相对于纵横比)而变化,我们可以使用top/bottom 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/ :afterpseudo元素以实现相同的结果.但请注意,在这种情况下,该百分比值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 */
}

这是更新的演示.

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 */
}

Answer 3

使用此css,因为您已经有了它的标记:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-container > img {
  margin-top:-50%;
  margin-left:-50%;  
}

这是一个有效的JsBin:http://jsbin.com/ihilUnI/1/edit

此解决方案仅适用于方形图像(因为百分比margin-top值取决于容器的宽度,而不是高度).对于随机大小的图像,您可以执行以下操作:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add browser-prefixes */
}

使用JsBin解决方案:http://jsbin.com/ihilUnI/2/edit

Answer 4

您可以使用margin: auto和绝对定位水平和垂直居中图像.也:

1. 可以通过使用伪元素来抛弃额外的标记.
2. 可以使用负左,上,右和下值显示大图像的中间部分.

.responsive-container {
  margin: 1em auto;
  min-width: 200px;       /* cap container min width */
  max-width: 500px;       /* cap container max width */
  position: relative;     
  overflow: hidden;       /* crop if image is larger than container */
  background-color: #CCC; 
}
.responsive-container:before {
  content: "";            /* using pseudo element for 1:1 ratio */
  display: block;
  padding-top: 100%;
}
.responsive-container img {
  position: absolute;
  top: -999px;            /* use sufficiently large number */
  bottom: -999px;
  left: -999px;
  right: -999px;
  margin: auto;           /* center horizontally and vertically */
}

<p>Note: images are center-cropped on &lt;400px screen width.
  <br>Open full page demo and resize browser.</p>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/400/sports/9/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/200/sports/8/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/400/sports/7/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/200/sports/6/">
</div>