HTMLでボックスを中央に配置する方法

下次还敢
リリース: 2024-04-05 12:36:20
オリジナル
890 人が閲覧しました

HTML を使用してボックスを中央に配置する方法

HTML の CSS スタイルシートを使用すると、ボックスを中央に配置するのが簡単です。ボックスの中央揃えを実現するには、主に 2 つの方法があります:

水平方向の中央揃え

  1. 設定text-align: center; スタイル: これは次のとおりです。 divh1p などのブロックレベル要素を水平方向に中央揃えする最も簡単な方法。
  2. Use margin: auto; style: この方法は、画像や埋め込みビデオなどの非ブロックレベルの要素 (インライン要素など) に適しています。要素が中央に配置されるように、要素の左右のマージンが自動的に設定されます。

垂直中央

  1. 使用 margin: 0 auto; スタイル: このスタイルは、要素を 0 に配置し、垂直方向の中央に配置します。
  2. position:Absolute; スタイルを使用する: このスタイルは、通常のドキュメント フローから要素を削除し、topleft## を使用できるようにします。 # 属性を使用して絶対に配置します。次に、これらのプロパティを 50% に設定し、transform:translate(-50%, -50%); を使用して要素をオフセットして中央に配置します。

次の例は、HTML と CSS を使用してボックスを水平方向および垂直方向に中央揃えする方法を示しています。 :

コンテナ要素に、中央に配置された要素を収容するのに十分な高さまたは幅があることを確認してください。

複雑なレイアウトの場合は、水平方向と垂直方向のセンタリング手法を組み合わせて使用​​する必要がある場合があります。
  • ブラウザ間の互換性を確保するために、各スタイルで必ずプレフィックスを指定してください (
  • -webkit-
  • -moz-
  • など)。

以上がHTMLでボックスを中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート