開發中遇見圖片跟文字放在一行顯示是最常見不過的了,兩個行內元素的對齊通常也是最令人頭疼,有時明明使用了最常用的對齊方法,卻總還是有些許偏差,先來看一個最基本的範例:
html部分:
<div class="wrap"> <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt=""> xx测试对齐Style- </div>
推薦教學:CSS入門教學
css部分:
.wrap { width: 300px; text-align: center; margin: 20px auto; font-size: 14px; } .wrap img { width: 20px; }
未使用對齊方式的效果如下:
.wrap { vertical-align: middle; } .wrap img { vertical-align: middle; }當我們使用常用的 vertical-align 對齊文字和圖片時,其實也是有一定的偏差的,如下圖:
display: flex; align-items: center;
.wrap img { height: 1ex; }5、vertical-align 數值方式的使用vertical-align 屬性值可以使用數值類型和百分比值,如,還是上面的基本案例:如果圖片高度是20px,文字font-size為22px時,預設對齊是文字的基線,那麼圖片會偏上2px,這時只需要將圖片向下偏移2px,就能實現對齊效果,而且 vertical-align 這個屬性的數值類型具有很好的兼容性。
.wrap { width: 100%; padding-top: 200px; text-align: center; margin: 20px auto; font-size: 22px; height: 40px; } .wrap img { width: 20px; vertical-align: -2px; }相關影片教學推薦:
以上是css實作文字圖示對齊的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!