vertical-align 調整行內元素對齊
阿新 • • 發佈：2020-12-31
技術標籤：CSS
在電商專案中，經常會搞活動，標上價格後，後面再跟個活動名稱，例如：
程式碼如下：
<html> <head> <style type="text/css"> .cls{ width: 60px; height: 40px; background-color: red; text-align: center; line-height: 40px; display: inline-block; vertical-align: text-bottom } </style> </head> <body> <div > <span style="font-size: 20px">¥</span> <span style="font-size: 60px;">2999</span> <span style="font-size: 20px;">.90</span> <div class="cls">優惠價</div> </div> <script> </script> </body> </html>
我們設定了vertical-align為text-bottom，從圖中我們看到並沒有底邊對齊，有沒有辦法讓它們一點不差的底邊對齊呢？設定vertical-align為12px就可以了，效果如下：
這下我們看到確實整齊劃一了，達到了畫素級別的底邊對齊。