將圖片在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%時確實可以充滿父級元素的高度即可。