在CSS中,將圖片和文字寫在一行可以通過(guò)使用display: inline-block
屬性來(lái)實(shí)現(xiàn),這個(gè)屬性可以將圖片和文字視為行內(nèi)元素,使它們能夠在一行中顯示。
以下是一個(gè)示例代碼:
HTML代碼:
<div> <img src="image.png" alt="圖片" style="display: inline-block;"> <span style="display: inline-block;">文字</span> </div>
CSS代碼:
div { display: flex; align-items: center; } img { max-width: 100px; height: auto; } span { margin-left: 10px; }
在這個(gè)示例中,div
元素使用了display: flex
屬性來(lái)使其成為彈性容器,align-items: center;
屬性將圖片和文字垂直居中,圖片的***大寬度設(shè)置為100px
,高度自動(dòng)縮放,文字與圖片之間的水平間距設(shè)置為10px
。
通過(guò)這種方法,你可以輕松地將圖片和文字寫在一行中,并且可以根據(jù)需要調(diào)整它們的布局和樣式。