HTMLで中央寄せしたブロックの幅をテキストサイズに合わせたい

投稿者: | 2018年4月12日

久しぶりに仕事でHTMLを直打ちする必要があり、そこでつまづいたのでメモです。

テキスト幅に合わせたブロックを中央寄せする

以下の条件を満たしたHTMLを記述したい

  • テキストを中央寄せする
  • そのテキストの上下に二重線を引く

イメージは以下の通り

aaaaaaa
bb
ccccc

見た目はこんな感じでいいのですが、HTMLの使い方が意図と異なるので正しい書き方を知りたかった。

上記は以下のタグで表現しています。

ご覧のとおり横幅を直接指定していて、テキストに合わせられていないのです。

横幅は直接指定ではなく、テキストの長さ(例では「aaaaaaa」の長さ)に合わせたいのですが、それっぽく設定しても意図したとおりになりません。

失敗例

横幅を指定しないと。

aaaaaaa
bb
ccccc

横幅が狭すぎると

aaaaaaa
bb
ccccc

横幅を狭めに設定しつつNOWRAPにすると。

aaaaaaa
bb
ccccc

正しく設定するには何をどのように設定すればいいのでしょうか。
正解が確認できたら追記します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.