如何垂直对齐div内的图像？

Question

题

如何在包含内部对齐图像div？

例

在我的例子,我需要垂直居中的<img>在<div>用class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame高度固定,图像高度未知..frame如果这是唯一的解决方案,我可以添加新元素.我试图在IE≥7,Webkit,Gecko上做到这一点.

在这里查看jsfiddle

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>

Answer 1

唯一的(和最好的跨浏览器)的方式,因为我知道是使用inline-block佣工height: 100%,并vertical-align: middle在这两个元素.

所以有一个解决方案:http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */

    text-align: center;
    margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

或者,如果您不想在现代浏览器中使用额外元素并且不介意使用IE表达式,则可以使用伪元素并使用方便的表达式将其添加到IE,每个元素只运行一次,因此没有任何性能问题:

:before和expression()IE 的解决方案:http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;

    text-align: center;
    margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

这个怎么运作:

1. 当你有两个inline-block元素彼此靠近时,你可以将每个元素对齐到另一边,所以vertical-align: middle你会得到这样的东西:

   

2. 当你有固定的高度(在一个块中px,em或其他绝对单位),可以设置在内部块的高度%.

3. 所以,加入一个inline-block具有height: 100%与固定高度块将对准另一inline-block它元素(<img/>你的情况),垂直接近它.

Answer 2

这可能很有用:

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}

参考:http://www.student.oulu.fi/~laurirai/www/css/middle/

Answer 3

matejkramny的解决方案是一个良好的开端,但超大的图像有一个错误的比例.
这是我的分叉:

演示:https://jsbin.com/lidebapomi/edit？html,css,output

HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Answer 4

3线解决方案:

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

这适用于任何事情.

从这里开始.

Answer 5

一个纯粹的CSS解决方案:

http://jsfiddle.net/3MVPM/

CSS:

.frame {
  margin: 1em 0;
  height: 35px;
  width: 160px;
  border: 1px solid red;
  position: relative;
}

img {
  max-height: 25px;
  max-width: 160px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #3A6F9A;
}

关键的东西

<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Answer 6

对于那些登陆这篇文章并且对更现代的解决方案感兴趣并且不需要支持旧版浏览器的人,您可以这样做:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ? Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ? To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: auto; */
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}

<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

这是一支笔:http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Answer 7

这样您就可以垂直居中(演示):

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

Answer 8

此外,您可以使用Flexbox来获得正确的结果:

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}

<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

Answer 9

使用flexbox有一个超级简单的解决方案!

.frame {
    display: flex;
    align-items: center;
}

Answer 10

您可以尝试将PI的CSS设置为 display: table-cell; vertical-align: middle;

Answer 11

你可以尝试下面的代码

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

Answer 12

CSS 网格

如果要在图像容器内垂直对齐单个图像，可以使用以下命令：

.img-container {
  display: grid;
}

img { 
  align-self: center;
}

.img-container {
  display: grid;
}

img { 
  align-self: center;
}

.img-container {
  display: grid;
  grid-auto-flow: column; 
  background: #BADA55;
  width: 1200px;
  height: 500px;
}

img.vertical-align {
  align-self: center;
}

如果你想在一个图像容器内对齐多个图像，你可以使用这个：

.img-container {
  display: grid;
  align-items: center;
}

<div class="img-container">
  <img src="https://picsum.photos/300/300" />
  <img class="vertical-align" src="https://picsum.photos/300/300" />
  <img src="https://picsum.photos/300/300" />
</div>

.img-container {
  display: grid;
  align-items: center;
}

请注意，我grid-auto-flow: column在这两种情况下都使用过，因为否则元素会通过指定显式网格项换行。在问题代码中，我也看到该项目水平居中。在这种情况下，只需使用place-items: center代替align-items: center。

Answer 13

背景图像解决方案 我一起删除了图像元素,并将其设置为div的背景.frame

http://jsfiddle.net/URVKa/2/

这至少适用于IE8,FF6和Chrome13

我检查过,这个解决方案无法缩小大于25px高度的图像.有一个属性叫做background-size设置元素的大小,但它是CSS3,它会与IE7要求冲突.

我建议您重做浏览器优先级并设计最佳浏览器,或者如果您想使用此解决方案,请获取一些服务器端代码来调整图像大小

Answer 14

你可以这样做:

演示

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}    

JavaScript的

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

Answer 15

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

关键属性是display:table-cell; 对于.frame.Div.frame显示为与此内联,因此您需要将其包装在块元素中.

这适用于FF,Opera,Chrome,Safari和IE8 +.

UPDATE

对于IE7,我们需要添加一个css表达式:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Answer 16

尝试使用纯css的这个解决方案http://jsfiddle.net/sandeep/4RPFa/72/ 可能是你的HTML的主要问题.在html中定义c lass&时,不要使用引号image height.

CSS:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

编辑:

当我使用img标签时,它会留下top空间line-height.现在我减少了line-height它的工作.CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

该line-height属性line-height在不同的浏览器中有所不同.所以; 我们必须定义不同的lass属性浏览器

查看此示例http://jsfiddle.net/sandeep/4be8t/11/

请查看此示例,了解Firefox和Chromeimage height中不同浏览器输入高度差异的不同

Answer 17

不确定IE,但在Firefox和Chrome下,如果你有img一个div容器,下面的CSS应该工作.至少对我来说效果很好:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Answer 18

这适用于现代浏览器(2016年编辑时),如此代码中的演示所示

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

为图像提供类或使用继承来定位需要居中的图像非常重要.在这个例子中,我们使用的.frame img {}是只有一个div包含的图像.frame才会被定位.

Answer 19

我的解决方案:http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

Answer 20

解决方案使用表和表格单元格

有时它应该通过显示为table/table-cell来解决.例如快速标题屏幕.这也是W3的推荐方式.我建议您查看这个名为W3C.org 中心的链接

这里使用的提示是:

• 绝对定位容器显示为表格
• 垂直对齐到显示为表格单元格的中心内容

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}

<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

就个人而言,我实际上不同意为此目的使用助手

Answer 21

对我有用的简单方法:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

非常适合谷歌浏览器.在不同的浏览器上尝试这个.

Answer 22

为了使图像居中放置在容器（可能是徽标）中，除了像这样的一些文字：

基本上，您包装图像

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Answer 23

想像你有

<div class="wrap">
    <img src="#">
</div>

和CSS：

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}