Question

我试图vertically center div floated left内的图片min-height，150px display:table;

问题是，我尝试的无效。我尝试了将div用于其他display:table-cell并使用div作为内部版本的所有内容，但所有内容都保持不变。

![<!DOCTYPE HTML> <html> <head> <title>The annoying image</title> </head> <body> <div style="border:1px solid #ddd; float:left; height:150px; padding:10px; display: table;"> <img src="/imgur/us/thumb_1.jpg" style="display: table-cell; vertical-align: middle; text-align: center;"> </div> </body> </html>内部显示的图片有一个固定的高度，但在服务器上会缩小到150像素。

我怎样才能让它发挥作用？

{{1}}

enter image description here

A fiddle

Answer 1

这是小提琴：http://jsfiddle.net/Cq48L/

<强> HTML

<div class="outer">
    <span class="helper"></span>
    <img src="http://i.stack.imgur.com/e0Snp.jpg">
</div>

<强> CSS

.outer {
    border:1px solid #ddd; 
    float:left; 
    height:150px; 
    padding:10px; 
    display: table;
}

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

也请检查以下答案：https://stackoverflow.com/a/18516474/3603806和https://stackoverflow.com/a/7310398/3603806

将图像垂直居中于div左侧并具有最小高度的div

1 个答案: