在網頁設計中，字體和圖片的對齊是非常重要的。使用CSS可以輕松實現字體和圖片的對齊，使頁面看起來更加美觀和專業。下面是幾種常見的方法。

1. 使用line-height屬性

p {
font-size: 16px;
line-height: 30px; /* 和圖片高度一致 */
}
img {
vertical-align: middle; /* 讓圖片和文字垂直居中對齊 */
}

這種方法是最常見的，也是最簡單的方法。通過設置段落的行高，使行高和圖片高度一致，然后使用vertical-align屬性將圖片和文字垂直居中對齊。

2. 使用flex布局

.container {
display: flex;
align-items: center; /* 垂直居中 */
}
p {
font-size: 16px;
margin-right: 10px; /* 圖片和文字之間的間距 */
}

使用flex布局可以輕松實現元素的水平和垂直居中。通過將img和p元素包裹在一個容器內，使用display: flex屬性，然后使用align-items屬性將圖片垂直居中對齊。

3. 通過position屬性定位

.container {
position: relative;
}
p {
font-size: 16px;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%); /* 垂直居中 */
}

使用position屬性可以將圖片與其他元素分離，然后使用absolute屬性將圖片絕對定位。通過設置top: 50%將圖片垂直居中對齊，并使用transform: translateY(-50%)將圖片向上移動一半的高度，使其完美居中。

4. 使用text-align屬性

.container {
text-align: center;
}
p {
font-size: 16px;
display: inline-block; /* 將段落元素轉換成行內塊元素 */
vertical-align: middle; /* 垂直居中 */
}
img {
vertical-align: middle; /* 垂直居中 */
}

使用text-align屬性可以將元素水平居中對齊。通過將段落元素轉換成行內塊元素，使其可以和圖片進行垂直居中。然后使用vertical-align屬性將圖片和段落元素垂直居中對齊。

通過上述方法，可以輕松實現CSS字體和圖片對齊，讓網頁看起來更加美觀和專業。