将图片在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="1.png">

    </div>

完整的CSS代码如下：

        #span1{

            vertical-align:middle;

            display:inline-block;

            height:100%;

        }

        img {

            vertical-align: middle;

        }

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