圖片置中問題

我想要嘗試把圖片置中,原本想法是直接
img{
   text-align:center;}
但是因為圖片不是文字,若我把它改成
img{
   padding:70px;
   width:80%;}
圖片好像就置中了,經過網路搜尋圖片的置中寫法,大部分的人都是用容器元素設置text-align:center(參考http://www.davidpai.tw/css/2011/css-align/)。

想請問有沒有其他更直覺的方法可以使圖片置中呢
以下附上第二課CSS的作業:
https://jsfiddle.net/CoalaCola/sfpnmzvx/2/
原文:
https://theinitium.com/article/20160827-dailynews-professional-mermaid/

感謝大家

發問時間:2016-08-30 23:52
Vince
0

新增推文
發問注意事項
  • 一次問一個問題。多個問題請分多次發問
  • 請盡量清楚描述您的問題
  • 請描述您做過哪些嘗試、試過哪些方法
  • 請盡可能地提供細節,幫回答者節省時間

1 個回答

1
有

一般來說 block 元素的置中方法就是先設好寬度,然後 margin: 0 auto;

(上下margin為零,左右margin自動的意思。結果就是會置中。)

但圖片是 inline 元素

所以先把你的圖片設成 block,然後設margin即可:

  display: block;
  margin: 0 auto;

請參考:

https://jsfiddle.net/okzsc3rv/

回答時間:2016-09-01 10:40
阿川先生
54

感謝分享! – Vince 00:35
新增推文