CSS 是網頁設計中不可缺少的部分，它能夠讓我們精確控制網頁的各個元素，包括圖片的對齊方式。下面我們來看看如何使用 CSS 來控制圖片的對齊方式。

首先，我們可以使用vertical-align屬性來控制圖片的垂直對齊方式。可以取值為middle、top、bottom等等。示例如下：

img {
vertical-align: middle;
}

該代碼片段將圖片垂直對齊方式設置為居中。同樣的，如果將vertical-align設置為top或者bottom，則可以分別將圖片對齊到容器的頂部或者底部。

然而，為了讓配合文本的圖片對齊更為精確，我們需要用到更加高級的方法，比如使用line-height或者transform屬性。下面我們分別講解這兩種方法的用法。

1. 使用 line-height 屬性

如果我們想讓一張跟文字同行的圖片居中對齊，這時候我們可以使用line-height處理。例如：

p {
line-height: 1.5em;
/* em：相對于父元素字體大小的倍數 */
}
img {
vertical-align: middle;
}

這段代碼會使得行高為父元素字體大小的 1.5 倍，同時圖片垂直對齊方式為居中。這樣就可以讓圖片始終與文字對齊。

2. 使用 transform 屬性

如果我們希望某個圖片能夠在容器內居中，而不是與文字對齊，我們可以使用transform屬性。例如：

.container {
position: relative; /* 父元素使用相對定位 */
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這段代碼會使得圖片定位在父元素中央位置，而不會受到文字行高的影響。通過transform的translate方法，我們可以將圖片向上和向左移動其自身寬度和高度的一半，從而實現居中對齊。

總之，使用上述方法，我們可以輕松控制圖片的對齊方式，使得網頁設計更加精確美觀。