css - 移动端页面文字垂直居中兼容性问题

Answer 1

現在のより効果的な解決策は、サイズを 2 倍にしてから半分に縮小する変換です。ただし、記述するのが面倒で、レイアウトに影響します。何か良い方法や便利な方法があれば知りたいです

Answer 2

今日の午後はこの問題に悩まされていました。Android のパフォーマンスは異常ですが、PC と Mac のパフォーマンスが正常であれば、マージン オフセットを使用して調整します。絶対位置と中心を変換するのに信頼性があります。

Answer 3

さらに、コードなしでは他の人が回答するのは難しいので、回答者が簡単にできるようにオンライン デモを作成できます。

Answer 4

フレックス レイアウトを使用すると、わずか数行のコードで垂直方向の中央揃えを実現できます。チュートリアルを検索するだけで見つかります

Answer 5

1. テーブルメソッド:

実装方法: テーブルの内容は元々縦方向中央に配置されており、テーブルをシミュレートすることで処理できます。

リーリー

2.vertical-align: middle
実装方法: 空要素のプレースホルダーを使用して実装します

リーリー

3. 絶対位置決め

リーリー

4. 変換を使用して

を実現します。 リーリー

互換性: Android2.3 システム ブラウザは、コンテナの位置決めに fix を直接使用することをサポートしていません。fixed コンテナを追加することで問題を解決できます。

結論:

推奨される変換実装

Answer 6

リーリー

Answer 7

行の高さを 30px に変更してみてください

Answer 8

line-height とvertical-align を一緒に使用するのがより適切です

Answer 9

シミュレーターが垂直方向の中央揃えをシミュレートしているのは事実ですが、実際の携帯電話では、Apple 製の携帯電話では垂直方向の中央揃えでレンダリングされ、Android スマートフォンでは高さを設定せず、高さが 1 に設定されます。 、垂直方向のセンタリングを維持するために、パディング値は上部と下部に等しくなります。

Answer 10

ピクセル密度の問題、たとえば、高さが 20px の場合、行の高さも 20px になります。ピクセル密度が偶数であれば問題はありませんが、奇数であれば問題はありません。したがって、一般に、テキストは 14 ピクセル、高さは偶数、テキストは 15 ピクセル、高さは奇数

のように、高さとフォント サイズの設定を一致させるのが最適です。