自動余白(左と右)を自動的に割り当てようとすると、自動幅が定義された要素が中央に配置されないのはなぜですか?自動幅を持つ要素を中心にマージン以外のトリックはありますか?ここで幅自動が中央に配置されない
はコードです:
<div style="width:auto; margin:0 auto 50px;">
<a href="#">Dummy link</a>
</div>
自動余白(左と右)を自動的に割り当てようとすると、自動幅が定義された要素が中央に配置されないのはなぜですか?自動幅を持つ要素を中心にマージン以外のトリックはありますか?ここで幅自動が中央に配置されない
はコードです:
<div style="width:auto; margin:0 auto 50px;">
<a href="#">Dummy link</a>
</div>
display: inline-block
を追加し、からwidth:auto
を削除してください。次に、外側の<div>
を作成しておきます。まだ作成していない場合は、text-align: center
を追加します。
<div style="text-align:center;">
<div style="display:inline-block; margin:0 auto 50px;">
<a href="#">Dummy link</a>
</div>
</div>
JSFiddle: https://jsfiddle.net/uLp7qj3e/
任意の場合は、親のdivにtext-align:center
を与えることができます。
margin-auto
を使用するには、divの幅を指定する必要があります。 auto
は、divタグとpタグの幅が100%になります。
ブラウザsuppportに基づいて、プロパティwidth:max-content;
を使用する他、ようにあなたはdivのための特定の幅を見つけると与えることができれば、あなたは、このために、ブラウザのハックを使用することができ
hereそれについて読む:
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
を
例は、スニペット:
<div style="background:red;margin:auto;width:intrinsic;width:-moz-max-content;width:-webkit-max-content;">
<a href="#">Dummy link</a>
</div>
完璧に動作します – AndrewMk