在Web開發中，通過CSS來控制網頁元素的布局和樣式是非常常見的。當我們需要在網頁中同時顯示圖片和文字時，如何讓它們更好的排列呢？

/* 將圖片和文字垂直居中對齊 */
img, p {
display: inline-block;
vertical-align: middle;
margin: 0;
}
/* 設置圖片和文字的間距 */
p {
margin-left: 20px;
}
/* 設置圖片的大小 */
img {
width: 100px;
height: auto;
}

以上代碼示例中，我們首先將圖片和文字都設置為行內塊元素，并設置它們的垂直對齊方式為居中對齊，這樣就可以讓它們在同一水平線上，而不會出現上下錯位的情況。然后通過給文本塊添加左邊距來控制圖片和文字之間的距離。最后，設置圖片的大小以使其占據合適的空間。

當然，還有其他的方法來控制圖片和文字的排列。例如，我們可以使用flexbox或grid layout來更精準地控制元素之間的間距和位置。但無論是哪種方法，在網頁開發中，將圖片和文字優雅地排列起來都是非常重要的。