垂直alignment图像在div中
我有图像垂直alignment在div中的问题
.img_thumb { float: left; height: 120px; margin-bottom: 5px; margin-left: 9px; position: relative; width: 147px; background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; } .img_thumb img { display: block; margin-left: auto; margin-right: auto; vertical-align: middle; } <div class="img_thumb"> <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a> </div> 据我所知，我需要“显示：块” 将图像定位在中心并且工作。 另外在教程中，我find了很多答案，但是它们并不“有用”，因为我的所有图像都不在同一个高度！
如果您的容器中有一个固定的高度，则可以将线高设置为与高度相同，并且将垂直居中。 然后添加文本alignment水平居中。
这是一个例子： http : //jsfiddle.net/Cthulhu/QHEnL/1/
编辑
你的代码应该是这样的：
.img_thumb { float: left; height: 120px; margin-bottom: 5px; margin-left: 9px; position: relative; width: 147px; background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; line-height:120px; text-align:center; } .img_thumb img { vertical-align: middle; }
图像将始终以水平和垂直居中，无论其大小如何。 这里有两个不同维度的图像的例子：
http://jsfiddle.net/Cthulhu/QHEnL/6/
http://jsfiddle.net/Cthulhu/QHEnL/7/
UPDATE
现在是2016（未来！），看起来有些东西正在改变（最后!!）。
早在2014年， 微软宣布将停止在所有版本的Windows中支持IE8，并鼓励所有用户升级到IE11或Edge。 那么，这应该在下周二（1月12日）发生。
为什么这很重要？ 随着IE8的宣布死亡 ，我们终于可以开始使用CSS3魔术了。
据说，这是一个alignment元素的更新方式，水平和垂直：
.container { position: relative; } .container .element { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
使用这个transform: translate(); 方法，你甚至不需要在你的容器中有一个固定的高度， 它是完全dynamic的 。 你的元素有固定的高度或宽度？ 你的容器呢？ 没有？ 没关系，它总是居中，因为所有居中的属性都固定在孩子身上，它是独立于父母的。 谢谢CSS3。
如果您只需要在一个维度中，您可以使用translateY或translateX 。 试试一下，你会看到它是如何工作的。 此外，尝试更改translate的值，你会发现它适用于一堆不同的情况。
在这里，有一个新的小提琴： https : //jsfiddle.net/Cthulhu/1xjbhsr4/
有关transform更多信息， 这里有一个很好的资源 。
快乐的编码。
老问题，但现在 CSS3使垂直alignment非常简单！
只需添加到<div>这个CSS：
display:flex; align-items:center; justify-content:center;
JSFiddle演示
现场示例：
.img_thumb { float: left; height: 120px; margin-bottom: 5px; margin-left: 9px; position: relative; width: 147px; background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; display:flex; align-items:center; justify-content:center; }
<div class="img_thumb"> <a class="images_class" href="http://i.imgur.com/2FMLuSn.jpg" rel="images"> <img src="http://i.imgur.com/2FMLuSn.jpg" title="img_title" alt="img_alt" /> </a> </div>
当你需要垂直alignment中心线时，你不需要定义定位。
inline-elements :- <img style="vertical-align:middle" ...> <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span> block-elements :- <td style="vertical-align:middle"> ... </td> <div style="display:table-cell; vertical-align:middle"> ... </div>
看演示： – http://jsfiddle.net/Ewfkk/2/
