在HTML中設置圖片居中顯示有很多方法,下面介紹幾種常用的方法:
<!-- 第一種方法:使用樣式將圖片水平居中 --> <div style="text-align: center;"> <img src="圖片地址" /> </div>
首先,使用一個div元素包裹我們的圖片,給這個div指定一個樣式text-align: center;,就可以將這個div中的元素水平居中顯示了,包括里面的圖片。
<!-- 第二種方法:使用CSS設置圖片居中 --> <style> .center { display: flex; justify-content: center; align-items: center; } </style> <div class="center"> <img src="圖片地址" /> </div>
第二種方法使用CSS來設置圖片居中,我們定義了一個class為center的樣式來實現。使用display: flex;可以將子元素放在父元素的中心,然后再使用justify-content: center;和align-items: center;來實現水平和垂直居中。
<!-- 第三種方法:使用表格 --> <table align="center"> <tr> <td><img src="圖片地址" /></td> </tr> </table>
第三種方法使用了HTML表格來實現圖片居中,在table元素中使用align="center"來實現水平居中。
以上就是幾種常用的將圖片居中顯示的方法,可以根據具體情況選擇適合自己的方法使用。
下一篇css3動畫模擬