概要
inline要素のようにテキストの長さによって要素の幅を変え、さらにその要素をmargin:0 autoで中央寄せに出来ないかっていうのを以前に悩んだのですが、対応策があったので紹介します。
ちょこちょこ使えて意外に便利だったっりします。
試行錯誤
marginをかけるのでinline要素では無理で、block要素だと幅が親要素に依存してしまうので
display:inline-block;
margin:0 auto;
というような感じでいけるのではないかと思いましたが無理でした。
対応策
というわけで、対応策をいってしまうと
display:table;
margin:0 auto;
これだけでオーケー。
お試しあれ。
追記
@ituki_b さんが比較デモを作って下さいました。
とてもわかりやすいです。
【display】幅可変でmargin:0 autoとtext-alignでの中央寄せ比較
【更新】 2020.01.09
ありがとうございます！