CSS 中有時候需要將圖片居中顯示,下面介紹兩種實現方式。
方法一:使用 text-align 屬性將 img 標簽居中
<style> img { display: block; margin-left: auto; margin-right: auto; } </style> <div style="text-align: center;"> <img src="image.jpg" alt="圖片"> </div>
方法二:使用 background-image 屬性并設置 background-position 為 center
<style> .image { width: 100px; height: 100px; background-image: url("image.jpg"); background-position: center; background-repeat: no-repeat; } </style> <div class="image"></div>
以上兩種方法都可以在不改變 img 標簽原本特性的情況下將圖片居中顯示,使用時可以根據實際情況選擇合適的方式。
上一篇css3字體漸變色怎么弄
下一篇css3字體垂直排列