応答性を損なうことなくインラインブロック要素を中央に配置するにはどうすればよいですか?

インライン ブロック要素を中央に配置する方法

インライン ブロック要素を中央に配置するのは、従来の方法の制限により難しい場合があります。ただし、CSS を使用する簡単な解決策があります。

問題

margin-left および margin-right auto を使用してインライン ブロック要素を中央に配置しようとしても、インラインブロック要素には幅が定義されていないため、機能します。表示プロパティを block に設定すると、中央揃えの問題は解決しますが、応答性が損なわれ、要素全体が強調表示されなくなります。

解決策

インライン ブロック要素を中央に配置するには、次のようにします。 text-align: をコンテナの中央に設定します。これにより、inline-block 要素がコンテナ内で水平方向に中央に配置されます。

Example

.container {
  text-align: center;
}

.equationElement {
  display: inline-block;
}

Demo

[Demo]ここにリンクしてください]

以上が応答性を損なうことなくインラインブロック要素を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。