CSS基礎 行內元素/行內塊元素設定垂直對齊方式及常見使用案例
阿新 • • 發佈：2021-12-30
vertical-align
| 屬性值 | 效果 |
| baseline | 基線對齊 |
| top | 頂部對齊 |
| middle | 中心對齊 |
| bottom | 底部對齊 |
使用案例1：百度搜索框左邊和右邊底部沒有對齊
使用vertical-align：top;/vertical-align:bottom; 之後效果
案例,html結構程式碼：
<body>
<input type="text" ><input type="button" value="百度">
</body>
CSS 結構程式碼
<style> input{ height: 50px; box-sizing: border-box; vertical-align: bottom; /*或者使用float：left*/ } </style>案例2：圖片和文字框預設沒有對齊
解決之後：
html 結構程式碼：<body> <img src="./images/" alt=""><input type="button" value="百度"> </body>
CSS結構程式碼： <style> img{ vertical-align: bottom; } </style>
案例3：div中的文字框是無法貼頂部的
使用之後效果
html結構程式碼： <div class="father"> <div class="son"></div> </div>
CSS結構程式碼： <style> .father{ width: 200px; height: 200px; background-color: pink; } input { vertical-align: top; } </style>
案例4： div 不設定高，有內容撐開；此時img標籤下面有縫隙存在；瀏覽器預設圖片和文字基線對齊方式，所以理由空間
使用vertical-align之後
html 結構程式碼： <div class="father"> <img src="./images/code.jpg" alt=""> </div>
CSS結構程式碼： <style> .father{ width: 400px; background-color: pink; } img { vertical-align: top;/*或者轉換為塊元素來消除行內元素和行內塊元素所帶來的影響：display:block*/ } </style>
案例5：利用line-height將div內的img垂直居中對齊（只對行內元素和行內塊元素生效）
html 結構程式碼 <div class="father"> <img src="./images/code.jpg" alt=""> </div>
CSS結構程式碼 <style> .father{ width: 600px; height: 600px; background-color: pink; line-height: 600px ; } img { vertical-align: middle; } </style>