ホームページ > 記事 > ウェブフロントエンド > 垂直配置属性の比較_html/css_WEB-ITnose
垂直配置属性の比較_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:35:18911ブラウズ
テストコード
<!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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。