CSS圖片對齊技巧

在CSS中，對齊圖片是一個常見的需求，我們可以使用CSS的vertical-align屬性來對齊圖片，這個屬性可以定義圖片在垂直方向上的對齊方式，下面是一些常見的vertical-align值：

top圖片與容器頂部對齊。

middle圖片與容器中心對齊。

bottom圖片與容器底部對齊。

如果你有一個div容器，里面有一張圖片，你可以這樣寫CSS：

div {
    height: 300px;
    width: 300px;
    border: 1px solid #000;
}
img {
    vertical-align: middle;
}

在這個例子中，圖片會被垂直居中在div容器內(nèi)，你可以根據(jù)需要調(diào)整vertical-align的值，以及容器的尺寸和位置。

需要注意的是，vertical-align屬性只對行內(nèi)元素和表格單元格中的圖片有效，如果你需要在一個塊級元素中垂直對齊圖片，可能需要使用其他方法，比如使用flexbox或grid布局。

如果你需要水平對齊圖片，可以使用CSS的text-align屬性，這個屬性可以定義文本和圖片在水平方向上的對齊方式。

img {
    text-align: right;
}

在這個例子中，圖片會被水平居右在容器中，你可以根據(jù)需要調(diào)整text-align的值，以及容器的尺寸和位置。