ホームページ > ウェブフロントエンド > CSSチュートリアル > 「display: table;」を使用せずにインラインブロック要素を中央に配置する方法は?

「display: table;」を使用せずにインラインブロック要素を中央に配置する方法は?

DDD
リリース: 2024-12-22 09:24:33
オリジナル
842 人が閲覧しました

How to Center Inline-Block Elements Without Using `display: table;`?

インライン ブロック要素で表示を中央揃えにする

質問:

ディスプレイを使用せずに、インライン ブロック表示で要素を中央に配置するにはどうすればよいですか: table;?

分析:

提供されたコードは、display: table; を使用します。ラップクラスを中央に揃えます。ただし、ユーザーは、display: inline-block の使用を好みます。

解決策:

この問題に対処するには、次のコードを適用できます。変更:

body {
    text-align: center;
}

.wrap {
    display: inline-block;
}
ログイン後にコピー

説明:

  • text-align: center; body 要素に適用すると、ページ全体が中央に配置され、ラップ クラスも中央に配置されます。
  • display: inline-block;ラップ クラスの場合、必要なスペースのみを占有し、ブロック レベルの要素として中央に揃えることができます。

これらの調整により、インライン ブロック要素は必要なく水平方向に中央に配置されます。表示用: テーブル;.

以上が「display: table;」を使用せずにインラインブロック要素を中央に配置する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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