久しぶりに仕事でHTMLを直打ちする必要があり、そこでつまづいたのでメモです。
テキスト幅に合わせたブロックを中央寄せする
以下の条件を満たしたHTMLを記述したい
- テキストを中央寄せする
- そのテキストの上下に二重線を引く
イメージは以下の通り
aaaaaaa
bb
ccccc
bb
ccccc
見た目はこんな感じでいいのですが、HTMLの使い方が意図と異なるので正しい書き方を知りたかった。
上記は以下のタグで表現しています。
ご覧のとおり横幅を直接指定していて、テキストに合わせられていないのです。
横幅は直接指定ではなく、テキストの長さ(例では「aaaaaaa」の長さ)に合わせたいのですが、それっぽく設定しても意図したとおりになりません。
失敗例
横幅を指定しないと。
aaaaaaa
bb
ccccc
bb
ccccc
横幅が狭すぎると
aaaaaaa
bb
ccccc
bb
ccccc
横幅を狭めに設定しつつNOWRAPにすると。
aaaaaaa
bb
ccccc
bb
ccccc
正しく設定するには何をどのように設定すればいいのでしょうか。
正解が確認できたら追記します。