CSS中圖片怎么頂端對齊 在CSS中添加圖片是一件很常見的事情。但有時候我們發現，圖片并不能頂端對齊，而是距離頂部有一定的間隔。這種情況常常讓人感到不解和困惑。那么，如何讓圖片頂端對齊呢？ 方法一： 一種解決方法是將圖片設置為背景圖片。具體實現方法如下： ```.container { width: 400px; height: 400px; background-color: lightgrey; display: flex; justify-content: center; align-items: flex-start; } .image { width: 200px; height: 200px; background-image: url('example.jpg'); background-size: cover; } ``` 在上面的代碼中，我們把要插入的圖片設為一個div的背景圖片，將該div的寬度和高度設置為圖片大小即可。同時，將container設置為flex布局，設置align-items: flex-start屬性，這樣圖片就能和container的頂端對齊了。 方法二： 另一種方法是使用vertical-align屬性。在某些情況下，我們發現圖片并沒有周圍其他元素高度那么高，而是留有空隙。這時，我們可以使用vertical-align屬性來對齊圖片。具體實現代碼如下： ``` .container { width: 400px; height: 400px; background-color: lightgrey; display: table; } .image { display: table-cell; vertical-align: top; } .image img { width: 200px; height: 200px; } ``` 在上面的代碼中，我們把父元素設置為表格布局，把子元素設置為表格單元格。接著，我們使用vertical-align屬性將圖片頂端對齊。最后，我們設置圖片的寬度和高度以保證圖片大小一致。 總結： 這里介紹了兩種實現CSS中圖片頂端對齊的方法。第一種方法是使用背景圖片；第二種方法是使用vertical-align屬性。大家可以根據具體情況選擇不同的方法。