Div 内で SVG を中央に配置する方法: Margin: Auto が機能しない理由とその修正方法

Div 内で SVG を完全に配置する方法

SVG (Scalable Vector Graphic) を div に追加するときは、配置することが重要です希望のレイアウトを正確に実現します。このトピックに関する一般的な質問と解決策は次のとおりです:

質問:

div 内で SVG を中央に配置しようとしていますが、正しく機能しません。 div の幅は 900 ピクセル、SVG の幅は 400 ピクセルです。 SVG の margin-left と margin-right を auto に設定しましたが、左マージンが 0 であるかのように動作します。何が問題でしょうか?

回答:

CSS では、SVG はデフォルトでインライン要素です。つまり、SVG はテキストのように動作します。そのため、ブロック要素のようにマージン設定には応答しません。これを修正するには、display: block を SVG に追加してブロック要素にする必要があります。これにより、margin: auto が期待どおりに機能し、div 内の SVG を中央に配置できるようになります。

または、レイアウトに応じて、SVG をインラインに保ち、親要素に text-align: center を設定することもできます。これにより、SVG を含むすべてのインライン要素が親の中央に配置されます。

もう 1 つのオプションは、親要素でフレックスボックスまたはグリッド レイアウトを利用し、中央揃えプロパティを使用してその中で SVG を配置することです。このアプローチにより、レイアウトの制御がより柔軟になり、さまざまなシナリオで役立ちます。

以上がDiv 内で SVG を中央に配置する方法: Margin: Auto が機能しない理由とその修正方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。