垂直对齐具有响应高度的div内的图像

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (26)

我有下面的代码,它设置了一个容器,其高度随浏览器大小的变化而变化(以保持方宽比)。

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将内联(-块)元素保持在行空间的中间。因此,我们将CSS声明添加到第一个孩子我们的元素(()图片)两者都是。

3)最后,为了删除空格字符之间的内联(-块)元素的字体大小。亲子零比font-size: 0;

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

添加内容

使用padding-top,在内容的顶部或底部,在集装箱

为了解决这个问题,我们使用包装器元素包装内容,然后通过以下方法从文档正常流中删除该元素绝对,最后展开包装器(但使用toprightbottomleft属性)以填充其父属性的整个空间,集装箱

我们开始:

.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-heightmax-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 */
}
用户回答回答于

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

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

扫码关注云+社区