首页 > 代码库 > 将图片在div中进行水平和垂直对齐

将图片在div中进行水平和垂直对齐

将图片在div中进行水平和垂直对齐

要进行水平对齐,只需在父级元素的样式中指定:

text-align: center;

注意,是在父级元素的样式中指定,而不是在img本身的样式中指定。

 

要进行垂直对齐,相对来说则麻烦得多。期待简单的在img元素的父级元素的样式中指定vertical-align: middle是行不通的,在img元素本身的样式中指定也同样行不通(你在网上查到的方法都是这样)。真正有效的方法如下:

首先,由于vertical-align: middle这个样式是只有在display样式以inline-block模式起作用时才会生效,因此,你必须先得让display的inline-block生效才行。而inline-block要生效,则同一行必须至少有两个元素才行,因为只有两个元素在一起才能形成“内联”的关系。

因此,你需要在图片的同一行放置另外一个元素,并对这个元素进行样式指定:

       vertical-align:middle;

       display:inline-block;

       height:100%;

这里height设置为100%,表示让这个元素的高度充满其父级(也是图片的父级)。这样,当这两个元素以其自身的高度中心线对齐时,自然就正好位于父级元素的垂直中心位置。

完整的HTML代码如下:

    <div id="header1">

        <span id="span1"></span>

        <img src="http://www.mamicode.com/1.png">

    </div>

完整的CSS代码如下:

        #span1{

            vertical-align:middle;

            display:inline-block;

            height:100%;

        }

        img {

            vertical-align: middle;

        }

这里使用的这个位于同一行的额外的元素是span,你用别的元素也可以,比如label、b等等,只要当这个元素的height属性被设置为100%时确实可以充满父级元素的高度即可。

 

将图片在div中进行水平和垂直对齐