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

时间：2013-08-29 16:29:12

标签： html css responsive-design vertical-alignment

我有以下代码设置一个容器，其高度随浏览器重新调整大小而变化（保持方形宽高比）。

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？我的所有图像都有不同的高度，容器不能有固定的高度/线高，因为它有响应......请帮忙！

10 个答案:

答案 0 :(得分：379)

这是一种在水平和垂直方向同时对齐父内的内联元素的技术：

垂直对齐

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

2）此外，添加vertical-align: middle会将内联（-block）元素保留在行间距的中间位置。因此，我们将CSS声明添加到 first-child 和我们的元素（ image ）。

3）最后，为了删除内联（-block）元素之间的空格字符，我们可以设置 parent <的字体大小/ em>到font-size: 0;为零。

注意：我在下面使用了Nicolas Gallagher的image replacement technique。

有什么好处？

  • 容器（父）可以具有动态尺寸。

  • 无需明确指定图像元素的尺寸。

  • 我们也可以轻松地将此方法用于align a <div> element vertically;它可以具有动态内容（高度和/或宽度）。但请注意，您必须重新设置font-size的{​​{1}}属性才能显示内部文本。的 Online Demo 

div
<div class="container">
    <div id="element"> ... </div>
</div>

输出

Vertically align an element in its container

响应式容器

由于OP已经知道如何创建响应式容器，因此本节不会回答这个问题。但是，我会解释它是如何工作的。

为了使容器元素的 height 更改为 width （尊重宽高比），我们可以使用top / bottom {{的百分比值1}}属性。

顶部/底部填充或边距上的percentage value相对于包含块的宽度。

例如：

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

以下是 Online Demo 。注释掉底部的线条并调整面板大小以查看效果。

此外，我们可以将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

<强> Demo #1 即可。
Demo #2 （使用<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 */ } 属性causes a huge space，位于容器内。

为了解决这个问题，我们通过包装元素包装内容，使用absolute positioning从文档正常流中删除该元素，最后展开包装器（使用:after，{{ 1}}，padding-top和top属性）填充其父级的整个空间容器。

我们走了：

right

以下是 Online Demo 。

全力以赴

bottom
left

以下是 WORKING DEMO 。

显然，您可以避免将.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

<强> UPDATED DEMO

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

以下是 UPDATED DEMO 。

答案 1 :(得分：47)

使用flexbox这很容易：

<强> FIDDLE

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

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

答案 2 :(得分：16)

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

答案 3 :(得分：12)

您可以使用margin: auto和绝对定位水平和垂直居中图像。也：

  1. 可以通过使用伪元素来抛弃额外的标记。
  2. 可以使用负左，上，右和底值显示大图像的中间部分。

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

答案 4 :(得分：4)

试试这个

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

答案 5 :(得分：2)

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

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

外部容器：

  • 应该有display: table;

内部容器：

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

内容框：

  • 应该有display: inline-block;

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

演示：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <img src="https://i.stack.imgur.com/mRsBv.png" />
     </div>
   </div>
</div>
＆＃13;
＆＃13;
＆＃13;

另见this Fiddle！

答案 6 :(得分：2)

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

  • 使用给定图像宽度的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

上的工作示例

答案 7 :(得分：0)

尝试

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

答案 8 :(得分：0)

html代码

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

css代码

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

答案 9 :(得分：0)

制作另一个div并添加＆＃39; dummy＆＃39;和＆＃39; img-container＆＃39;在div里面

HTML和CSS如下所示

＆＃13;
＆＃13; 
html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}
＆＃13; 
<div class="responsive-container">
    <div class="inner-container">
		<div class="dummy">Sample</div>
		<div class="img-container">
			Image tag
		</div>
	</div>	
</div>
＆＃13;
＆＃13;
＆＃13;

而不是100％的响应容器＆＃39;你可以给出你想要的高度。

相关问题
最新问题