ホームページ >ウェブフロントエンド >CSSチュートリアル >「」要素内のテキストを垂直方向に配置するにはどうすればよいですか?

「」要素内のテキストを垂直方向に配置するにはどうすればよいですか?

How to Vertically Align Text within a `` Element?

Web 開発では、

内でテキストを垂直に配置します。という要素が共通の課題となる可能性があります。この質問では、この位置合わせを実現するためのいくつかの方法を検討します。

解決策 1: 行の高さ

最も簡単な解決策は、

の line-height プロパティを設定することです。要素の高さを一致させます。これは、テキストが 1 行の場合に効果的に機能します。

#abc {
  line-height: 50px;
}

解決策 2: テーブル要素

複数行のテキストの場合、vertical-align プロパティは無効になります。仕事してないよ。代わりに、テキストをで囲みます。要素を編集し、次のスタイルを適用します。

#abc {
  display: table;
  width: 100%;
}

#abc span {
  vertical-align: middle;
  display: table-cell;
}

解決策 3: Transform

もう 1 つのオプションは、translateY() でtransform プロパティを使用して、テキストを垂直方向に配置することです。これには、要素の位置を絶対位置に設定し、その上部から -50% 変換する必要があります。

#abc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

注: 変換ソリューションは、IE8 などの古いブラウザーと互換性がない可能性があります。クロスブラウザーをサポートするには、適切なブラウザー接頭辞を付けて使用することをお勧めします。

以上が「」要素内のテキストを垂直方向に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

続きを見る

「 」要素内のテキストを垂直方向に配置するにはどうすればよいですか?