HTML / CSS：margin：auto不適用於 <img> 標簽
[英]HTML/CSS : margin:auto not working for <img> tag
問題描述
我制作了一個html文檔，並在其中放置了<img>標記。
我想使用margin-left:auto和margin-right:auto對齊圖像的中心，但是它不起作用。 這是HTML代碼：
<html>
<head>
<style>
img {
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/images/lamp.jpg" />
</body>
</html>
怎么了？
2 個解決方案
解決方案1
5 已采納 2014-02-28 19:10:29
您需要將<img>更改為block元素。 添加display: block; 到您的CSS，它將居中。
img{
margin-left:auto;
margin-right:auto;
display: block;
}
默認情況下， <img>標簽是行內塊，使用邊距技巧時不會居中。
另外，不必同時使用margin-left和margin-right ，而不必使用margin ，但是我總是喜歡使用盡可能少的代碼行。
img{
margin: 0 auto;
display: block;
}
解決方案2
1 2014-02-28 19:17:00
您可以使用CSS來做到這一點，但是HTML對此也有一個內置選項。 祝好運！
<html><body><img src="IMG SRC HERE" align="center/right"></html></body>
CSS保證金：0自動;沒有在<img>標簽上工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.