CSS 圖片的對齊方式可以通過 text-align、vertical-align 和 float 屬性進行設置。

img {
/* 水平居中對齊 */
display: block;
margin: 0 auto;
/* 文字基線對齊 */
vertical-align: middle;
/* 浮動對齊 */
float: left;
}

text-align 可以控制圖片的水平對齊，支持的值有 left、right、center。

vertical-align 可以控制圖片相對于周圍文本的垂直對齊方式，支持的值有 top、middle、bottom。

float 可以讓圖片在文本中浮動，支持的值有 left 和 right。

同時，我們還可以使用 display: flex 進行更加靈活的布局。

.container {
display: flex;
justify-content: center;
align-items: center;
}
.container img {
/* 居中對齊 */
margin: 0 auto;
}

使用 flexbox 進行布局時，我們可以通過 justify-content 控制水平對齊，align-items 控制垂直對齊。在單個圖片中，我們可以將 display 設為 block，并通過 margin: 0 auto 實現水平居中對齊。