通過 CSS，我們可以輕松實現左邊圖片右邊詳情的效果。

HTML 代碼如下：
<div class="container">
<img src="image.jpg" alt="圖片">
<div class="details">
<h2>詳情標題</h2>
<p>這里是詳情的文字描述。</p>
</div>
</div>
CSS 代碼如下：
.container {
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 50%; /* 圖片占頁面寬度的一半 */
}
.details {
width: 50%; /* 詳情占頁面寬度的一半 */
padding: 20px;
}
h2 {
margin-top: 0;
}

通過將父元素設為 flex，然后使用 align-items 和 justify-content 居中，我們可以使圖片和詳情水平居中。然后，將圖片寬度設為 50%，將詳情寬度設為 50%，便可以使它們在同一行顯示。最后，添加一些 padding 和 margin 樣式，使布局更為美觀。