テストコード
<!DOCTYPE html><html><head> <style> #dd { //line-height: 300px; background-color: gray; position: relative; font-size: 60px; //height: 300px; } #dd > .middle { position: absolute; top: 50%; height: 1px; background-color: black; left: 0; right: 0px; } #dd span { background-color: green; } </style> </head><body> <div id="dd"> <img style="height:60px;width:100px;background-color:red;"><span>xg</span> <div class="middle"></div> </div></body></html>
デフォルトはベースラインで整列することです
画像を削除してみてください:
ここで、xgスパンの高さは60、68の高さはline-height、高さです。上の画像は72です。divを伸ばした画像です。スパンの下端からベースラインまでの距離が8であることがわかります
imgにvertical-align:bottom;を追加します。画像を div の下端に合わせますvertical-align: text-bottom
で揃えます
vertical-align:sub;
vertical-align:bottom; と似ていますが、下にあります
vertical-align:middle;
画像がずれています
画像の高さを1に変更して試してみてください
xの中心に揃っていることがわかります
rree
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
