CSS是一種用于網頁設計的語言,可以通過CSS控制網頁中各個元素的樣式、布局等屬性。其中,文本和圖片是網頁中最常見的元素之一。下面我們來討論如何實現一個CSS樣式,讓文本和圖片在同一行顯示,并且文本在圖片的下方居中。
.text-img { display: flex; align-items: center; } .text-img img { margin-right: 10px; }
上面的CSS代碼中,我們通過flex布局實現了文本和圖片在同一行顯示,同時通過align-items屬性使文本垂直居中。其中,通過.text-img選擇器來選中文本和圖片的父元素,而通過.text-img img選擇器來選中圖片元素。
通過為圖片元素設置margin-right屬性,可以使圖片與文本之間存在一定的間距,從而使得頁面更加美觀。
該CSS樣式可以應用于很多不同的場景中,比如在商品展示頁面中,可以使用該樣式讓商品圖片和名稱在同一行顯示,并且名稱垂直居中。
下一篇div 鏈接跳轉