[英]Vertically align an image inside a div with responsive height
I have the following code which sets up a container which has a height that changes with the width when the browser is re-sized (to maintain a square aspect ratio). 我有以下代码设置一个容器,其高度随浏览器重新调整大小而改变(以保持方形宽高比)。
HTML HTML
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<IMG HERE>
</div>
</div>
CSS 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;
}
How can I vertically align the IMG inside the container? 如何在容器内垂直对齐IMG? All my images have variable heights and the container can't have a fixed height/line height because it's responsive... Please help! 我的所有图像都有不同的高度,容器不能有固定的高度/线高,因为它的响应...请帮忙!
Here is a technique to align inline elements inside a parent , horizontally and vertically at the same time: 这是一种在父级内部同时水平和垂直对齐内联元素的技术:
1) In this approach, we create an inline-block
(pseudo-)element as the first (or last) child of the parent , and set its height
property to 100%
to take all the height of its parent . 1)在该方法中,我们创建了一个inline-block
(伪)元件作为母体的第一(或最后)的孩子,并设置其height
属性至100%
采取其父的所有的高度。
2) Also, adding vertical-align: middle
keeps the inline(-block) elements at the middle of the line space. 2)另外,添加vertical-align: middle
会将内联(-block)元素保留在行间距的中间。 So, we add that CSS declaration to the first-child and our element (the image ) both. 因此,我们将CSS声明添加到第一个子 元素和我们的元素 ( 图像 )。
3) Finally, in order to remove the white space character between inline(-block) elements, we could set the font size of the parent to zero by font-size: 0;
3)最后,为了删除内联(-block)元素之间的空白字符,我们可以通过font-size: 0;
将父类的字体大小设置为零font-size: 0;
. 。
Note: I used Nicolas Gallagher's image replacement technique in the following. 注意:我在下面使用了Nicolas Gallagher的图像替换技术 。
There's no need to specify the dimensions of the image element explicitly. 无需明确指定图像元素的尺寸。
We can easily use this approach to align a <div>
element vertically as well; 我们可以轻松地使用这种方法垂直对齐<div>
元素 ; which may have a dynamic content (height and/or width). 它可以具有动态内容(高度和/或宽度)。 But note that you have to re-set the font-size
property of the div
to display the inside text. 但请注意,您必须重新设置div
的font-size
属性才能显示内部文本。 Online Demo . 在线演示 。
<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 */
}
This section is not going to answer the question as the OP already knows how to create a responsive container. 由于OP已经知道如何创建响应式容器,因此本节不会回答这个问题。 However, I'll explain how it works. 但是,我会解释它是如何工作的。
In order to make the height of a container element changes with its width (respecting the aspect ratio), we could use a percentage value for top/bottom padding
property. 为了使容器元素的高度随其宽度 (相对于纵横比)而变化,我们可以使用百分比值来表示top / bottom padding
属性。
A percentage value on top/bottom padding or margins is relative to the width of the containing block. 顶部/底部填充或边距上的百分比值是相对于包含块的宽度。
For instance: 例如:
.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 */
}
Here is the Online Demo . 这是在线演示 。 Comment out the lines from the bottom and resize the panel to see the effect. 从底部注释掉线条并调整面板大小以查看效果。
Also, we could apply the padding
property to a dummy child or :before
/ :after
pseudo-element to achieve the same result. 此外,我们可以将padding
属性应用于虚拟子元素或:before
/ :after
伪元素来实现相同的结果。 But note that in this case, the percentage value on padding
is relative to the width of the .responsive-container
itself. 但请注意 ,在这种情况下, 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 */
}
Demo #1 . 演示#1 。
Demo #2 (Using :after
pseudo-element) 演示#2 (使用:after
伪元素)
Using padding-top
property causes a huge space at the top or bottom of the content, inside the container . 使用padding-top
属性会在容器内部的内容顶部或底部产生巨大空间 。
In order to fix that, we have wrap the content by a wrapper element, remove that element from document normal flow by using absolute positioning , and finally expand the wrapper (bu using top
, right
, bottom
and left
properties) to fill the entire space of its parent, the container . 为了解决这个问题,我们通过包装元素包装内容,使用绝对定位从文档正常流中删除该元素,最后展开包装(使用top
, right
, bottom
和left
属性)来填充整个空间它的父母, 容器 。
Here we go: 开始了:
.responsive-container {
width: 60%;
position: relative;
}
.responsive-container .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Here is the Online Demo . 这是在线演示 。
<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;
}
Here is the WORKING DEMO . 这是工作演示 。
Obviously, you could avoid using ::before
pseudo-element for browser compatibility , and create an element as the first child of the .img-container
: 显然,您可以避免使用::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%;
}
UPDATED DEMO . 更新的演示 。
max-*
properties 使用max-*
属性 In order to keep the image inside of the box in lower width, you could set max-height
and max-width
property on the image: 为了使图像保持在较低宽度的框内,您可以在图像上设置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 */
}
Here is the UPDATED DEMO . 这是更新的演示 。
With flexbox this is easy: 使用flexbox这很容易:
Just add the following to the image container: 只需将以下内容添加到图像容器中:
.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 */
}
Use this css, as you already have the markup for it: 使用此css,因为您已经有了它的标记:
.img-container {
position: absolute;
top: 50%;
left: 50%;
}
.img-container > img {
margin-top:-50%;
margin-left:-50%;
}
Here is a working JsBin: http://jsbin.com/ihilUnI/1/edit 这是一个有效的JsBin: http ://jsbin.com/ihilUnI/1/edit
This solution only works for square images (because a percentage margin-top value depends on the width of the container, not the height). 此解决方案仅适用于方形图像(因为百分比margin-top值取决于容器的宽度,而不是高度)。 For random-size images, you can do the following: 对于随机大小的图像,您可以执行以下操作:
.img-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* add browser-prefixes */
}
Working JsBin solution: http://jsbin.com/ihilUnI/2/edit 使用JsBin解决方案: http ://jsbin.com/ihilUnI/2/edit
You can center an image, both horizontally and vertically, using margin: auto
and absolute positioning. 您可以使用margin: auto
和绝对定位来水平和垂直居中图像。 Also: 也:
.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 <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>
Try this one 试试这个吧
.responsive-container{
display:table;
}
.img-container{
display:table-cell;
vertical-align: middle;
}
Here's a technique that allows you to center ANY content both vertically and horizontally! 这是一种技术,允许您垂直和水平居中任何内容!
Basically, you just need a two containers and make sure your elements meet the following criteria. 基本上,您只需要一个两个容器,并确保您的元素符合以下条件。
display: table;
应该有display: table;
display: table-cell;
应该有display: table-cell;
vertical-align: middle;
应该有vertical-align: middle;
text-align: center;
应该有text-align: center;
display: inline-block;
应该有display: inline-block;
If you use this technique, just add your image (along with any other content you want to go with it) to the content box. 如果您使用此技术,只需将您的图像(以及您要使用的任何其他内容)添加到内容框。
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>
See also this Fiddle ! 另见这个小提琴 !
I came across this thread in search of a solution that: 我遇到了这个线程,寻找一个解决方案:
Testing some of the solutions posted above I didn't find one to meet all of this criteria, so I put together this simple one which might be useful for other people needing to do the same: 测试上面发布的一些解决方案我没有找到满足所有这些标准的解决方案,因此我将这个简单的解决方案放在一起,这可能对其他需要这样做的人有用:
.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>
Try 尝试
Html HTML
<div class="responsive-container">
<div class="img-container">
<IMG HERE>
</div>
</div>
CSS CSS
.img-container {
position: absolute;
top: 0;
left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}
html code HTML代码
<div class="image-container"> <img src=""/> </div>
css code css代码
img
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Make another div and add both 'dummy' and 'img-container' inside the div 制作另一个div并在div中添加'dummy'和'img-container'
Do HTML and CSS like follows 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>
Instead of 100% for the 'responsive-container' you can give the height that you want., 而不是100%的“响应式容器”,你可以给出你想要的高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.