CSS可以讓我們實現很多豐富的頁面效果，其中之一就是照片與上方對齊。一般情況下，我們在頁面中插入照片時，往往會感覺上下對齊不太協調。但是，通過CSS，我們可以輕松地實現照片與上方的對齊。

首先，我們需要了解一下照片與上方對齊的原理。照片的位置是由其外部包裹元素的vertical-align屬性來確定的。因此，我們需要將該屬性設置為top，才能讓照片與上方對齊。

img {
vertical-align: top;
}

上面的代碼片段中，我們將img元素的vertical-align屬性設置為top。通過這個設置，照片的位置就與其包裹元素的頂部對齊了。如果需要實現底部對齊，可以將vertical-align屬性的值設置為bottom。

除了上下對齊，我們還可以通過CSS實現照片與文本對齊。具體方法是設置line-height屬性為照片的高度。這樣就能讓照片和文本的基線對齊了。

img {
vertical-align: middle;
margin-right: 10px;
}
p {
line-height: 50px;
}

上面的代碼片段中，我們將img元素的vertical-align屬性設置為middle，同時給其添加了一個右邊距。這個右邊距是為了讓照片和文本之間留有一定的間隙。而對于p元素，則設置了line-height屬性為50px（假設照片的高度也為50px），這樣就能實現照片與文本的對齊了。