如何在div中垂直对齐图像?

Question

How can you align an image inside of a containing div?

如何使一个包含div的图像对齐?

Example

In my example, I need to vertically center the <img> in the <div> with class ="frame" :

在我的例子中，我需要将在

中与class ="frame":

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

.frame's height is fixed and image's height is unknown. I can add new elements in .frame if that's the only solution. I'm trying to do this on IE≥7, Webkit, Gecko.

.frame的高度是固定的，图像的高度是未知的。我可以在。frame中添加新的元素，如果这是唯一的解决方案。我想这样做在IE≥7日Webkit,壁虎。

See the jsfiddle here

看到这里的jsfiddle

30 个解决方案

#1

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

我所知道的唯一的(和最好的跨浏览器)方法是使用具有高度的inline-block helper函数:100%和垂直对齐:两个元素的中间。

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

因此有一个解决方案:http://jsfiddle.net/kizu/4RPFa/4570/。

.frame {
    height: 25px;      /* equals max 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=250 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Or, if you don't want to have an extra element in modern browsers and don't mind using IE expressions, you can use a pseudo-element and add it to IE using a convenient Expression, that runs only once per element, so there won't be any performance issues:

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

The solution with :before and expression() for IE: http://jsfiddle.net/kizu/4RPFa/4571/

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

.frame {
    height: 25px;      /* equals max 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=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>

---

How it works:

它是如何工作的:

1. When you have two inline-block elements near each other, you can align each to other's side, so with vertical-align: middle you'll get something like this:

   当你有两个inline-block元素在彼此附近时，你可以对齐到对方的一侧，所以在垂直对齐:中间你会得到这样的东西:

   

2. When you have a block with fixed height (in px, em or other absolute unit), you can set the height of inner blocks in %.

   当你有一个固定高度的块(在px、em或其他绝对单位)时，你可以将内部块的高度设为%。

3. So, adding one inline-block with height: 100% in a block with fixed height would align another inline-block element in it (<img/> in your case) vertically near it.
4. 因此，添加一个具有高度的inline-block: 100%在具有固定高度的块中，将另一个inline-block元素对齐到它(在您的例子中为)中。

#2

This might be useful:

这可能是有用的:

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

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

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

#3

matejkramny's solution is a good start, but oversized images have a wrong ratio.
Here's my fork:

matejkramny的解决方案是一个好的开始，但是过大的图像有一个错误的比例。这是我的餐叉:

demo: https://jsbin.com/lidebapomi/edit?html,css,output

演示:https://jsbin.com/lidebapomi/edit?html、css输出

---

HTML:

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

CSS:

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

#4

3 line solution:

3线解决方案:

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

This applies to anything.

这适用于任何事情。

From here.

从这里。

#5

A PURE CSS Solution:

一个纯CSS解决方案:

http://jsfiddle.net/3MVPM/

http://jsfiddle.net/3MVPM/

The CSS:

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

Key stuff

关键的东西

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

#6

This way you can center an image vertically (demo):

这样你就可以将图像垂直居中(演示):

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}

#7

For those that landed on this post and are interested in a more modern solution, and that have no need to support legacy browsers, you can do this:

对于那些在本文中登陆并对更现代的解决方案感兴趣的人，并且不需要支持遗留浏览器，您可以这样做:

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: 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>

Here's a Pen: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

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

#8

You could try setting the CSS of PI to display: table-cell; vertical-align: middle;

您可以尝试设置PI的CSS显示:表格单元;vertical-align:中间;

#9

http://jsfiddle.net/MBs64/

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* equals max 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;
}

The key property is display: table-cell; for .frame. Div.frame is displayed as inline with this, so you need to wrap it in a block element.

关键属性显示:表格单元;.frame。框架以内联方式显示，因此您需要将其封装到块元素中。

This works in FF, Opera, Chrome, Safari and IE8+.

这在FF、Opera、Chrome、Safari和IE8+上都有效果。

UPDATE

更新

For IE7 we need to add a css expression:

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

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

#10

Background image solution I removed the image element all together and set it as background of the div with a class of .frame

背景图像解决方案我将图像元素全部移除，并将其作为div的背景设置为一个.frame。

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

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

this at least works fine on IE8, FF6 and Chrome13

这至少在IE8、FF6和Chrome13上运行良好。

I checked, this solution will not work to shrink images larger then 25px height. There is a property called background-size which does set the size of the element, but it is CSS3 which would conflict with IE7 requirement.

我检查过，这个解决方案不会缩小图像的大小，然后是25px高。有一个属性叫backearth -size，它确实设置了元素的大小，但是CSS3会与IE7的要求相冲突。

I wouldd advice you to either redo your browser priorities and design for the best available browsers, or get some serverside code to resize the images if you'd want to use this solution

我建议您要么重做浏览器的优先级，要么设计最好的浏览器，或者得到一些服务器端代码来调整图像的大小，如果您想使用这个解决方案的话。

#11

You could do this:

你可以这样做:

demo

http://jsfiddle.net/DZ8vW/1

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* equals max 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";
})

#12

There is a super easy solution with flexbox!

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

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

#13

You can try below code

你可以试试下面的代码。

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

#14

Not sure about IE, but under Firefox and Chrome, if you have a img in a div container, the following css should work. At least for me works well:

不确定IE，但是在Firefox和Chrome下，如果你在一个div容器中有一个img，那么下面的css应该可以工作。至少对我来说是这样的:

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

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

#15

Try this solution with with pure css http://jsfiddle.net/sandeep/4RPFa/72/ May be the main problem with your html. Your not use quote when you define class & image height in your html.

尝试使用纯css http://jsfiddle.net/sandeep/4RPFa/72/可能是html的主要问题。当您在html中定义类和图像高度时，不要使用引号。

CSS:

CSS:

.frame {
    height: 25px;      /* equals max 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;
}

EDIT :

编辑:

When i work around with the img tag it's leave 3px to 2px space from top. Now i decrease line-height & it's work. css:

当我使用img标签的时候，它会从顶部留下3px到2px空间。现在我减少了行高和它的工作。css:

    .frame {
        height: 25px;      /* equals max image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height:22px;
        *:first-child+html line-height:24px; /* for IE7 */
    }

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

the line-height property is render differently in different browsers. So; we have to define different line-height property browsers

在不同的浏览器中，行高度属性的呈现方式不同。所以;我们必须定义不同的行高度属性浏览器。

Check this example http://jsfiddle.net/sandeep/4be8t/11/

检查这个例子http://jsfiddle.net/sandeep/4be8t/11/

Check this example about line-height different in different browsers input height differences in Firefox and Chrome

在不同的浏览器输入高度的差异，在Firefox和Chrome中检查这个例子。

#16

My solution: http://jsfiddle.net/XNAj6/2/

我的解决方案: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;
}

#17

Easy way which work for me:

轻松的工作方式:

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

Works for Google Chrome very well. Try this one out on different browser.

适用于谷歌镀铬。在不同的浏览器上试试这个。

#18

This works for modern browsers (2016 at time of edit) as shown in this demo on codepen

这适用于现代浏览器(在编辑时的2016年)，如在codepen的演示中所示。

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

It is very important that you either give the images a class or use inheritance to target the images that you need centered. In this example we used .frame img {} so that only images wrapped by a div with a class of .frame would be targeted.

很重要的一点是，您可以给图像一个类，或者使用继承来针对您需要的图像。在这个示例中，我们使用.frame img{}，这样只需要将一个div与一个.frame关联的图像作为目标。

#19

If you can live with pixel-sized margins, just add font-size: 1px; to the .frame. But remember, that now on the .frame 1em = 1px, which means, you need to set the margin in pixels too.

如果你可以使用像素大小的边缘，只需添加字体大小:1px;.frame。但是记住，现在在。frame 1em = 1px，也就是说，你需要设置像素的边缘。

http://jsfiddle.net/feeela/4RPFa/96/

http://jsfiddle.net/feeela/4RPFa/96/

EDIT: now its not centered anymore in Opera…

编辑:现在它不再以歌剧为中心了……

#20

SOLUTION USING TABLE & TABLE CELL

Sometimes it should be solved by displaying as table/table-cell. For example a fast title screen. It is a recommended way by W3 also. I recommend you check this link called Centering things from W3C.org

有时它应该通过显示为表/表单元来解决。例如，一个快速的标题屏幕。这也是W3推荐的方法。我建议你从W3C.org网站上查询这个链接。

The tips used here are:

这里使用的技巧是:

• Absolute positioning container displayed as table
• 绝对定位容器显示为表。
• Vertical aligned to center content displayed as table-cell
• 垂直对齐到中心内容显示为表格单元格。

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

Personally I actually disagree about use helpers for this purpose

就我个人而言，我实际上不同意使用助手来达到这个目的。

#21

For centering an image inside a container (it could be a logo) besides some text like this:

对一个容器内的图像进行定心(它可以是一个标志)，除了一些这样的文本:

Basically you wrap the image

基本上你把图像包好。

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

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

img {
//height: auto;
  vertical-align: middle;
}

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

#22

I had the same problem. This works for me:

我遇到了同样的问题。这工作对我来说:

<style type="text/css">
div.parent {
     position: relative;
}

img.child {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
</style>

<div class="parent">
    <img class="child">
</div>

#23

The best solution is that

最好的解决办法是。

.block{
    /* decor */
    padding:0 20px;
    background:#666;
    border:2px solid #fff;
    text-align:center;
    /* important */
    min-height:220px;
    width:260px;
    white-space:nowrap;
}
.block:after{
    content:'';
    display:inline-block;
    height:220px; /* the same as min-height */
    width:1px;
    overflow:hidden;
    margin:0 0 0 -5px;
    vertical-align:middle;
}
.block span{
    vertical-align:middle;
    display:inline-block;
    white-space:normal;
}

#24

I have been playing around with using padding for center alignment. You will need to define the top level outer-container size, but the inner container should resize, and you can set the padding at different percentage values.

我一直在为中心对齐使用填充。您需要定义*的外部容器大小，但是内部容器应该调整大小，并且您可以设置不同百分比值的填充。

jsfiddle

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

#25

how about this one?

这一个怎么样?

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

and you can vary font-size

你可以改变字体大小。

#26

Want to align a image wich have after a text / title and both are inside a div?

想要对齐一个文本/标题后的图像，并且都在一个div中?

See on JSfiddle or Run Code Snippet.

参见JSfiddle或运行代码片段。

Just be sure to have an ID or a class at all your elements(div, img, title, etc).

一定要在所有元素(div、img、title等)上有一个ID或一个类。

For me works this solution on all browsers(for mobile devices you must to adapt your code with: @media).

对于我来说，在所有的浏览器上都可以使用这个解决方案(对于移动设备，你必须用@media来调整你的代码)。

h2.h2red {
color: red; 
font-size: 14px;
}
.mydivclass {
margin-top: 30px;
display: block;
}
img.mydesiredclass {
margin-right: 10px;  
display: block;  
float: left;/*If you want to allign the text with an image on the same row*/  
width: 100px;
heght: 100px;
margin-top: -40px/*Change this value to adapt to your page*/;
}

<div class="mydivclass">
<br />
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
<h2 class="h2red">Text alligned after image inside a div by negative manipulate the img postion</h2>
</div>

#27

Using table and table-cell method do the job, specially because you targeting some old browsers as well, I create a snippet for you which you can run it and check the result:

使用表格和表格单元法做这项工作，特别是因为您也针对一些旧的浏览器，我为您创建了一个代码片段，您可以运行它并检查结果:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}

<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/*-128.png" />
  </div>
</div> 

#28

This code work well for me.

这段代码对我来说很有效。

<style>
.listing_container{width:300px; height:300px;font: 0/0 a;}
.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
 .listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>

<div class="listing_container">
    <img src="http://www.advancewebsites.com/img/theme1/logo.png">  
 </div>

#29

The old JSFiddle link I posted here didnt work anymore, thats probably the reason for the downvote. Just for the sake of this being a valid answer i still want to post the jQuery solution again. This works for every element that has the v_align class applied to it. It will be vertical centered in the parent and on resizing of the window it will be recalculated.

我在这里发布的旧的js提琴链接已经不再工作了，这可能是投票失败的原因。为了这是一个有效的答案，我仍然想再次发布jQuery解决方案。这适用于应用于它的v_align类的每个元素。它将垂直居中，并在窗口大小调整后重新计算。

Link to the JSFiddle

链接到JSFiddle

$(document).ready(function() {
  // define the class that vertial aligns stuff
  var objects = '.v_align';
  // initial setup
  verticalAlign(objects);

  // register resize event listener
  $(window).resize(function() {
    verticalAlign(objects);
  });
});

function verticalAlign(selector) {
  $(selector).each(function(val) {
    var parent_height = $(this).parent().height();
    var dif = parent_height - $(this).height()
    // should only work if the parent is larger than the element
    var margin_top = dif > 0 ? dif/2 : 0;
    $(this).css("margin-top", margin_top + "px");
  });
}

#30

You can use table structure inside a div

可以在div中使用表结构。

<div class="frame">
     <table width="100%">
         <tr>
            <td vertical-align="middle" align="center" height="25">
                <img src="https://jsfiddle.net/img/logo.png" >  
            </td>
        </tr>
    </table>
</div>