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

投稿者: | 2018年4月12日

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

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

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

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

イメージは以下の通り

aaaaaaa
bb
ccccc

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

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

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

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

失敗例

横幅を指定しないと。

aaaaaaa
bb
ccccc

横幅が狭すぎると

aaaaaaa
bb
ccccc

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

aaaaaaa
bb
ccccc

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

コメントを残す

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