如何在div中垂直對齊圖像 - How to vertically align an image inside a div

問題：

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>

---

解決方案：

參考一： https://stackoom.com/question/UW7u/如何在div中垂直對齊圖像
參考二： https://oldbug.net/q/UW7u/How-to-vertically-align-an-image-inside-a-div