ホームページ > ウェブフロントエンド > CSSチュートリアル > コンテナ DIV 内で DIV を水平方向に整列するにはどうすればよいですか?

コンテナ DIV 内で DIV を水平方向に整列するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-10-31 19:32:29
オリジナル
794 人が閲覧しました

How to Horizontally Align DIVs Within a Container DIV?

DIV の水平方向の位置合わせ

コンテナ DIV 内で DIV を水平方向に中央揃えにしようとすると、位置合わせの問題が発生する可能性があります。これはいくつかの理由で発生する可能性があります。問題を修正するには、次の解決策を検討してください:

Float の代わりに Inline-Block Display を使用する

Float プロパティを利用する代わりに、表示の採用を検討してください: inline-ブロック属性。これにより、DIV がインライン要素として表示され、水平方向の配置が可能になります。

更新されたコード

この解決策を実装するには、CSS コードを次のように変更します。

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  display: inline-block;
}</code>
ログイン後にコピー

この調整により、水平方向の位置合わせの問題が修正され、DIV をコンテナ内の中央に配置できるようになります。このアプローチは、DIV の幅が固定されているか、比較的類似しているシナリオに特に適していることに注意してください。

以上がコンテナ DIV 内で DIV を水平方向に整列するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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