如何使用CSS在HTML中的div元素内垂直居中放置图像?

本文介绍了如何使用CSS在HTML中的div元素内垂直居中放置图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有这样的标记:

<div> <img /> </div>

div高于img:

div { height: 100px; } img { height: dynamic-value-smaller-than-100px; }

我需要将图像放置在div的中间(在其上下具有相同的空白).

I need the image to be in the middle of the div (have same amout of white space above and below it).

我尝试了此操作，但它不起作用:

I tried this and it does not work:

div { vertical-align: middle; }

推荐答案

如果您的图像纯粹是装饰性的，那么将其用作背景图像可能是一种更具语义的解决方案.然后，您可以指定背景的位置

if your image is purely decorative, then it might be a more semantic solution to use it as a background-image. You can then specify the position of the background

background-position: center center;

如果它不是装饰性的并且构成有价值的信息，则img标签是合理的.在这种情况下，您需要为包含div的样式设置以下属性:

If it is not decorative and constitutes valuable information then the img tag is justified. What you need to do in such case is style the containing div with the following properties:

div{ display: table-cell; vertical-align: middle }

在此处详细了解此技术.据说无法在IE6/7上运行(在IE8上运行).

Read more about this technique here. Reported to not work on IE6/7 (works on IE8).