2013/09/26

CSS Image 水平置中

剛剛把『使用Google Chart API產生QR Code』所產生的QR Code新增到網頁，QR Code圖片總是靠左邊的

<!DOCTYPE HTML>
<html>
 <body>
  <img src="http://chart.apis.google.com/chart?cht=qr&chl=http://writecodepeople.blogspot.tw/&chs=480x480" id="qrcode">
 </body>
</html>



只要將網頁加入以下CSS，QR Code部份就會改成水平置中了

<style type="text/css">
   #qrcode{
    display: block;
    margin:0 auto;
   }
  </style>

為什麼加了兩行就將圖片水平置中了呢？

因為display可以改變塊級元素的顯示方式，選擇block是把他當成div去用；並將margin設定為0 auto，這種設定方法常用於置中對齊

如同學『Kennedy』所說，CSS得靠經驗適時的去活用它


參考資料：
By at
標籤: