圖和文字并排用CSS怎么寫
在CSS中,我們可以使用display: inline-block;
屬性將圖片和文字并排顯示,以下是一個簡單的示例:
<div style="display: flex; align-items: center;"> <img src="image.jpg" style="display: inline-block; margin-right: 10px;" /> <p style="display: inline-block;">這是一段文字</p> </div>
在這個示例中,div
元素使用了display: flex;
屬性來創(chuàng)建一個彈性布局,align-items: center;
屬性將圖片和文字垂直居中對齊,圖片使用了display: inline-block;
屬性來使其并排顯示,同時設(shè)置了margin-right: 10px;
屬性來添加一些間隔,文字也使用了display: inline-block;
屬性來使其并排顯示。
你可以根據(jù)需要調(diào)整這個示例,例如改變圖片和文字的大小、顏色等樣式,希望這個示例能幫助你實現(xiàn)圖和文字的并排顯示。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時請以鏈接形式注明文章出處。