CSS を使用してコンテナを中央に配置し、子要素を左揃えにする方法

中央揃えのコンテナと左揃えの子要素

画像が固定された中央揃えのコンテナに表示される希望のレイアウトを実現するには距離が離れている場合は、さまざまな CSS プロパティを考慮する必要があります。

コンテナの中央揃え:

• text-align: center を使用します。親コンテナ (outer-div) に追加して、ページの水平方向の中央に配置します。

子要素コンテナの作成:

• 画像をラップします

画像サイズの設定:

• 一貫した画像サイズ (高さと幅) を維持します。 ) 位置を確実に調整します。 img タグで高さと幅のプロパティを使用します。

余白の追加:

• 子の間に小さなマージン (マージン: 10px;) を導入します。 inner-div 内の要素 (img タグ)。これにより、画像間に固定の間隔が作成されます。

水平方向の配置:

• 表示をインラインに設定します。子要素コンテナ (inner-div) で子要素 (画像) を水平方向に表示します。

左揃え子要素:

• text-align: left; を使用します。子要素コンテナー (inner-div) で、その中の子要素 ​​(画像) を左揃えにします。

レスポンシブ デザイン:

• 画面サイズに基づいてコンテナの幅を調整するには、メディア クエリを利用します。指定された例では、inner-div 幅がさまざまなビューポート幅に合わせて調整されています。

これらの手順に従い、提供されたコード スニペットを実装することで、画像がコンテナーの中央に配置された目的のレイアウトを実現できます。一定の距離を置いて次々に表示されます。

以上がCSS を使用してコンテナを中央に配置し、子要素を左揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。