CSS 圖片水平置中

CSS vertical-align 常用參數表

語法	說明
vertical-align:baseline;	預設值，元素在該行的基礎線上，大約在文字的中間位置，並不美觀。
vertical-align:sub;	圖片垂直對齊該行本文的下標位置。
vertical-align:super;	圖片垂直對齊該行本文的上標位置。
vertical-align:top;	圖片垂直對齊該行元素的最高位置。
vertical-align:text-top;	圖片垂直對齊該行文字的最高位置。
vertical-align:middle;	圖片垂直對齊該行文字的置中位置。
vertical-align:bottom;	圖片垂直對齊該行元素的最低位置。
vertical-align:text-bottom;	圖片垂直對齊該行文字的最低位置。
vertical-align:%;	以百分比來讓圖片垂直對齊該行文字，可以有負值。

CSS vertical-align 屬性範例

<style type="text/css">
#TestImg1{
    vertical-align:text-top;
}
#TestImg2{
    vertical-align:middle;
}
#TestImg3{
    vertical-align:text-bottom;
}
#SeperationLine{
    height:1px;
    border-top:1px #ccc dashed;
    margin:10px 0px;
}
</style>
這張圖未使用 vertical-align 屬性<img id="TestImg0" src="圖片網址">這張圖未使用 vertical-align 屬性
<div id="SeperationLine"></div>
這張圖 vertical-align 設為 text-top<img id="TestImg1" src="圖片網址">這張圖 vertical-align 設為 text-top
<div id="SeperationLine"></div>
這張圖 vertical-align 設為 middle<img id="TestImg2" src="圖片網址">這張圖 vertical-align 設為 middle
<div id="SeperationLine"></div>
這張圖 vertical-align 設為 bottom<img id="TestImg3" src="圖片網址">這張圖 vertical-align 設為 bottom

範例輸出效果

這張圖未使用 vertical-align 屬性這張圖未使用 vertical-align 屬性

這張圖 vertical-align 設為 text-top這張圖 vertical-align 設為 text-top

這張圖 vertical-align 設為 middle這張圖 vertical-align 設為 middle

這張圖 vertical-align 設為 bottom這張圖 vertical-align 設為 bottom

參考來源wibibij網頁設計教學百科