css - 如何在div中垂直对齐图像(How to vertically align an image inside a 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 ”将<img>在<div>垂直居中：)

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

(.frame的高度是固定的，图像的高度是未知的。)

I can add new elements in .frame if that's the only solution.

(如果这是唯一的解决方案，则可以在.frame添加新元素。)

I'm trying to do this on Internet Explorer 7 and later, WebKit, Gecko.

(我正在尝试在Internet Explorer 7和更高版本的WebKit，Gecko上执行此操作。)

See the jsfiddle here .

(在这里查看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> 

  ask by Arnaud Le Blanc translate from so

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

(据我所知，唯一（也是最好的跨浏览器）方法是在两个元素上使用height: 100%和vertical-align: middle的inline-block帮助器。)

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

(因此，有一个解决方案： 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> 

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

(或者，如果您不想在现代浏览器中添加多余的元素并且不介意使用Internet Explorer表达式，则可以使用伪元素，然后使用方便的表达式将其添加到Internet Explorer，该表达式每个元素仅运行一次，因此不会有任何性能问题：)

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

(Internet Explorer的： :before和expression()解决方案： 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> 

---

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元素时，您可以使它们彼此对齐，因此，使用vertical-align: middle您将得到如下所示的内容：)

   

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.

   (因此，添加一个height: 100% inline-block height: 100%在高度固定的块中height: 100%将使其中的另一个inline-block元素（在您的情况下为<img/> ）垂直对齐。)