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

2018-06-14 14:38:04

我有下面的代码，它设置了一个容器，当浏览器重新调整大小（保持方形宽高比）时，其高度随宽度而变化。

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？我所有的图像都有不同的高度，容器不能有固定的高度/线条高度，因为它的响应速度...请帮助！

下面是一种技术，可以同时在父级中水平和垂直对齐内联元素：

垂直对齐

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

2）另外，添加vertical-align: middle将内联（-block）元素保留在行空间的中间。所以，我们将CSS声明添加到第一个孩子和我们的元素（图像）两者。

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

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

有什么好处？

容器（父）可以具有动态尺寸。

没有必要明确指定图像元素的尺寸。

我们可以很容易地使用这种方法来垂直对齐一个<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 浏览器兼容性中使用::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 */
}

这是更新的演示 。

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

使用这个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

此解决方案仅适用于方形图像（因为百分比边际值取决于容器的宽度，而不是高度）。对于随机大小的图像，您可以执行以下操作：

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

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

链接地址: http://www.djcxy.com/p/41551.html

上一篇: Vertically align an image inside a div with responsive height

下一篇: align: middle not working