在網頁設計中，插入圖片是一個必要的操作，而如何讓圖片居中顯示也是一個常見的需求。在這里介紹一下如何使用CSS來實現圖片的居中顯示。
img {
display: block;
margin: 0 auto;
}可以看出，只需要對圖片應用以下CSS樣式即可：
- display: block;：將圖片變成塊狀元素，可以讓圖片自動換行，并且占據整個父元素的寬度。
- margin: 0 auto;：設置圖片左右margin為auto，使其水平居中。
除了直接在img標簽上應用CSS樣式，也可以通過類或ID選擇器來為圖片添加樣式。下面是一個示例代碼：
<html>
<head>
<title>居中顯示圖片</title>
<style>
.center-img {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<img class="center-img" src="example.png" alt="example">
</body>
</html>在上面的代碼中，我們創建了一個類選擇器.center-img，并將樣式應用到了img標簽中。這樣做的好處是可以復用樣式，并且不需要為每個圖片單獨設置樣式。
總之，使用CSS設置居中顯示圖片是一項非常基礎的技能，對于網頁設計師來說是必不可少的一環。希望這篇文章能夠幫助大家更好地理解并應用這項技術。
上一篇mysql比較兩張表數據
下一篇mysql比較出生日期