垂直对齐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;将父类的字体大小设置为零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已经知道如何创建响应式容器，因此本节不会回答这个问题。 但是，我会解释它是如何工作的。

为了使容器元素的高度随其宽度 （相对于纵横比）而变化，我们可以使用百分比值来表示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 / :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属性会在容器内部的内容顶部或底部产生巨大空间 。

为了解决这个问题，我们通过包装元素包装内容，使用绝对定位从文档正常流中删除该元素，最后展开包装（使用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> 

Answer 5

试试这个吧

  .responsive-container{
          display:table;
  }
  .img-container{
          display:table-cell;
          vertical-align: middle;
   }

Answer 6

这是一种技术，允许您垂直和水平居中任何内容！

基本上，您只需要一个两个容器，并确保您的元素符合以下条件。

外侧容器：

• 应该有display: table;

内部容器：

• 应该有display: table-cell;
• 应该有vertical-align: middle;
• 应该有text-align: center;

内容框：

• 应该有display: inline-block;

如果您使用此技术，只需将您的图像（以及您要使用的任何其他内容）添加到内容框。

演示：

 body { margin : 0; } .outer-container { position : absolute; display: table; width: 100%; height: 100%; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; background: #fff; padding : 12px; border : 1px solid #000; } img { max-width : 120px; } 

 <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> <img src="https://i.stack.imgur.com/mRsBv.png" /> </div> </div> </div> 

另见这个小提琴 ！

Answer 7

我遇到了这个线程，寻找一个解决方案：

• 使用给定图像宽度的100％
• 保持图像宽高比
• 保持图像垂直对齐中间
• 适用于不完全支持flex的浏览器

测试上面发布的一些解决方案我没有找到满足所有这些标准的解决方案，因此我将这个简单的解决方案放在一起，这可能对其他需要这样做的人有用：

 .container { width: 30%; float: left; border: 1px solid turquoise; margin-right: 3px; margin-top: 3px; } .container:last-of-kind { margin-right: 0px; } .image-container { position: relative; overflow: hidden; padding-bottom: 70%; /* this is the desired aspect ratio */ width: 100%; } .image-container img { position: absolute; /* the following 3 properties center the image on the vertical axis */ top: 0; bottom: 0; margin: auto; /* uses image at 100% width (also meaning it's horizontally center) */ width: 100%; } 

 <div class="container"> <div class="image-container"> <img src="http://placehold.it/800x800" class="img-responsive"> </div> </div> <div class="container"> <div class="image-container"> <img src="http://placehold.it/800x800" class="img-responsive"> </div> </div> <div class="container"> <div class="image-container"> <img src="http://placehold.it/800x800" class="img-responsive"> </div> </div> 

关于JSFiddle的工作示例

Answer 8

尝试

HTML

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

CSS

.img-container {
    position: absolute;
    top: 0;
    left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}

Answer 9

HTML代码

<div class="image-container"> <img src=""/> </div>

css代码

img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }

Answer 10

制作另一个div并在div中添加'dummy'和'img-container'

HTML和CSS如下所示

 html , body {height:100%;} .responsive-container { height:100%; display:table; text-align:center; width:100%;} .inner-container {display:table-cell; vertical-align:middle;} 

 <div class="responsive-container"> <div class="inner-container"> <div class="dummy">Sample</div> <div class="img-container"> Image tag </div> </div> </div> 

而不是100％的“响应式容器”，你可以给出你想要的高度。