ホームページ >ウェブフロントエンド >htmlチュートリアル >モバイル端末の H5 行の高さが中央にならない問題_html/css_WEB-ITnose

モバイル端末の H5 行の高さが中央にならない問題_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:47:282107ブラウズ

以下はテストコードです。

<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <title>Default</title>    <style>        .top{width:100%;height:30px; line-height:30px; border:1px solid #000;font-size:14px;}    </style></head><body>    <div class="top">固定模板</div></body></html>


PC では、すべてのブラウザーで問題なく、上部のテキストは水平方向に中央揃えになります。
Android および IOS の WeChat では、上部のテキストが表示されます。上向きにオフセットされます (上部の空白が少なく、下部の空白が多いのは明らかです)

この問題を解決する方法はありますか?


ディスカッションへの返信 (解決策)

モバイル版

vertical-align:middle の代わりに、px の代わりにパーセントまたは em を使用できますか?

上記のどれも機能しません。px または rem を使用して上方にオフセットする方法はありますか?

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。