CSS可以讓我們輕松地在圖片中間放置字體,這個功能非常實用,可以讓我們更好地進行設計。
img { display: block; margin: auto; } img::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } p { display: inline-block; vertical-align: middle; }
首先,我們需要讓圖片居中顯示,可以用以下代碼實現:
img { display: block; margin: auto; }
接著,我們需要在圖片的前面插入一個偽元素,在它的content屬性中輸入一個空字符串,這個偽元素將被放置在圖片的前面。
img::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
我們在偽元素中設置了display:inline-block,它可以讓元素像行內元素一樣描述,同時又可以設置寬、高等屬性。height:100%與圖片高度相同,并且vertical-align:middle讓元素垂直居中。
現在,我們可以在圖片后插入一個段落元素,使用以下代碼:
p { display: inline-block; vertical-align: middle; }
我們設置了display:inline-block,它可以讓元素像行內元素一樣描述,同時又可以設置寬、高等屬性。vertical-align:middle讓元素垂直居中。
現在,我們已經完成在圖片中間放置字體的過程,非常方便實用。
下一篇css字往內縮