在div元素中垂直对齐图像？ [英] Vertically aligning an image in a div element?

问题描述

我有一个div元素，其高度设置为 em ，其宽度设置为百分比。其中包含图像。它的宽度百分比（83％）。但是，如果我的分辨率是该div元素开始变得有点狭窄，那么图像也会变窄，而不是占据整个div（应该如此），而是图像变小并出现在div的顶部。为了弥补这一点，我想在div元素中垂直对齐我的图像。我该怎么办？

I have a div element whose height I set with em, and whose width I set as a percentage. There is an image contained within. It has a width as a percentage (83%). However, if I am at a resolution where that div element is starting to get a little narrow, the image narrows up as well, but rather than taking up the entire div (as it should), the image just becomes small and appears just at the top of the div. To compensate for this, I want to vertically align my image within the div element. How can I do this?

推荐答案

vertical-align在 DIV 元素。唯一的方法是将此属性设置为在CSS中的div：

vertical-align does not work in DIV elements. the only way to do this is to set this property to your div in css :

.divClass
{
   display:table-cell;
   vertical-align:middle;
}

之后，您的 DIV 元素的作用类似于表的 TD 元素。

after it, your DIV element will act like TD elemnt of Table.

将div中的图像对齐并指定图像的百分比垂直位置，看下面的链接（百分比值）：

to align your image in div with specifying percentage for image vertical position look at link bellow (percentage value) :

http://reference.sitepoint.com/css/vertical-align

这篇关于在div元素中垂直对齐图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！