開發中遇見圖片跟文字放在一行顯示是最常見不過的了,兩個行內元素的對齊通常也是最令人頭疼,有時明明使用了最常用的對齊方法,卻總還是有些許偏差,先來看一個最基本的範例:
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; }
未使用對齊方式的效果如下:
##預設的對齊方式是 baseline ,也就是x字母的最下面那條線。 這也回答了第一個問題,瀏覽器的圖片跟文字未額外設定時是基於小寫字母x的下緣為基準,也就是 vertical-align:baseline; 。 常見的幾個居中方案1、使用 vertical-align 居中對齊方式.wrap { vertical-align: middle; } .wrap img { vertical-align: middle; }
display: flex; align-items: center;
.wrap img { height: 1ex; }
.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中文網其他相關文章!