div 内で SVG を中央に配置するにはどうすればいいですか? 質問する

div 内で SVG を中央に配置するにはどうすればいいですか? 質問する

div の中央に配置しようとしている SVG があります。div の幅は 900 ピクセルです。SVG の幅は 400 ピクセルです。SVG の margin-left と margin-right は auto に設定されています。動作しません。左マージンが 0 (デフォルト) であるかのように動作します。

誰かこのエラーが何なのか知っていますか?

ベストアンサー1

SVG はデフォルトでインラインです。

それを追加するdisplay: blockと、margin: auto期待どおりに動作します。

または、レイアウトによっては、SVG をインラインのままにして、text-align: center代わりに親要素に設定することもできます。

別の方法として、親要素のフレックスまたはグリッド レイアウトを使用して SVG を中央に配置することもできます。

おすすめ記事