在學習 HTML 和 CSS 的過程中，新手經常會遇到這樣的問題：
為什麼給 <img> 標籤設置 margin: auto 無法實現水平居中？
這篇文章將帶你理解 <img> 標籤的默認顯示屬性，以及如何正確地對齊它。
<img> 標籤的默認 display 屬性
在 HTML 中，<img> 標籤是一種行內元素（inline element）。
這意味著它的默認 display 屬性是 inline，這種屬性決定了它的行為方式：
- 行內元素：與文本一起排列，與其他行內元素排在同一行中。
- 無法使用
margin: auto來實現水平居中：因為margin: auto通常適用於塊級元素來進行水平居中，但<img>作為行內元素時，這種方式無效。
在網頁開發中，行內元素的特點是按照文本的行對齊，因此 <img> 的行為更像是文字的一部分。
這就導致了當我們想通過 margin: auto 將圖片水平居中或靠右對齊時，它並不起作用。
如何正確對齊 <img> 標籤
要讓 <img> 標籤水平居中或靠右對齊，我們需要將它從行內元素轉變為塊級元素。
有幾種方法可以達到這個目的：
使用 display: block
最簡單的方式是將 <img> 的 display 屬性設置為 block。
這樣它就變成了一個塊級元素，這時我們可以使用 margin: auto 來進行水平居中。
HTML：
<img src="example.jpg" alt="示例圖片" class="center-block">CSS：
.center-block {
display: block;
margin: 0 auto;
}在這裡，我們把 <img> 設置為塊級元素，並通過 margin: 0 auto; 讓它在父元素中水平居中。
使用父容器和文本對齊方式
另一種方法是將 <img> 放在一個父容器中，並利用父容器的文本對齊屬性來控制圖片的位置。
HTML：
<div class="text-center">
<img src="example.jpg" alt="示例圖片">
</div>CSS：
.text-center {
text-align: center;
}在這個例子中，我們使用了一個 div 作為父容器，並將 text-align 設置為 center，這樣容器中的圖片就會被水平居中。
這是因為行內元素（包括圖片）會遵循父容器的文本對齊方式。
如果我們想讓圖片靠右對齊，可以將 text-align 設置為 right：
HTML：
<div class="text-right">
<img src="example.jpg" alt="示例圖片">
</div>CSS：
.text-right {
text-align: right;
}使用 Flexbox
如果需要更靈活的對齊方式，我們可以使用 CSS 的 Flexbox。
這是一種現代且強大的佈局方式，可以輕鬆實現水平和垂直居中。
HTML：
<div class="flex-center">
<img src="example.jpg" alt="示例圖片">
</div>CSS：
.flex-center {
display: flex;
justify-content: center;
}在這個例子中，我們使用 display: flex 來定義父容器的佈局方式，並使用 justify-content: center 來讓圖片水平居中。
如果你想讓圖片靠右對齊，可以將 justify-content 設置為 flex-end。
HTML：
<div class="flex-right">
<img src="example.jpg" alt="示例圖片">
</div>CSS：
.flex-right {
display: flex;
justify-content: flex-end;
}使用 float
我們也可以使用 CSS 的 float 屬性來對齊圖片。
這種方法較少用於水平居中，但適合讓圖片靠左或靠右對齊。
HTML：
<img src="example.jpg" alt="示例圖片" class="float-right">CSS：
.float-right {
float: right;
}這樣圖片會浮動到父容器的右邊，但需要注意的是，float 常用於實現簡單的左右對齊，並且可能會影響周圍的其他元素佈局，因此在現代開發中不如 Flexbox 或 Grid 常用。
小結
在 HTML 中，<img> 標籤的默認 display 屬性是 inline，這導致它像文本一樣在行內排列，並無法直接使用 margin: auto 來進行水平居中。
為了解決這個問題，我們可以將圖片設置為塊級元素，或者使用父容器和現代的 CSS 技術來進行對齊。
- 使用
display: block和margin: auto可以輕鬆實現水平居中。 - 使用父容器的
text-align可以讓行內元素居中或靠右對齊。 - 使用 Flexbox 是最靈活的對齊方式，適合現代開發。
- 使用
float可以讓圖片靠左或靠右，但在現代開發中使用較少。
希望這篇文章能幫助你理解如何正確對齊 <img> 標籤，並且在你的網頁開發中靈活運用這些方法！