HTML5 如何設置圖片位置 HTML5 支持多種方式設置圖片位置。以下是一些常見的方法： 1. 使用 float 屬性 可以使用 float 屬性來讓圖片浮動到左側或右側。下面的代碼演示了如何讓圖片浮動到左側：

<style>
.left {
float: left;
margin-right: 10px;
}
</style>
<p>
<img src="image.jpg" alt="圖片" class="left">
這里是文本，圖片在左邊。
</p>

注意，為了讓文本不覆蓋圖片，需要為圖片設置一個右邊距。 2. 使用 position 屬性 可以使用 position 屬性來讓圖片定位到一個特定的位置。下面的代碼演示了如何讓圖片位于文本的頂部：

<style>
.top {
position: absolute;
top: 0;
}
</style>
<p>
向下滾動以查看圖片。
</p>
<img src="image.jpg" alt="圖片" class="top">
<p>
這里是文本，圖片在頂部。
</p>

注意，為了防止出現重疊問題，需要在文本下方留出足夠的空間。 3. 使用 text-align 屬性 可以使用 text-align 屬性來讓圖片居中或靠右。下面的代碼演示了如何讓圖片居中：

<style>
.center {
display: block;
margin: 0 auto;
}
</style>
<p>
<img src="image.jpg" alt="圖片" class="center">
</p>

注意，為了讓圖片居中，需要將其設置為塊級元素，并為其添加左右外邊距。 4. 使用 figure 和 figcaption 標簽 可以使用 figure 和 figcaption 標簽來包裝圖片和其注釋。下面的代碼演示了如何使用這兩個標簽：

<figure>
<img src="image.jpg" alt="圖片">
<figcaption>這里是圖片的注釋</figcaption>
</figure>

這樣可以讓圖片和其注釋在視覺上有所關聯，同時也方便了屏幕閱讀器等輔助技術的使用。 總結 以上是 HTML5 設置圖片位置的一些常用方法。根據實際情況選擇合適的方法，可以讓你的頁面更加美觀和易讀。