原稿どおりにHTML化したいときなどに、文字列を中央に配置しつつ、左揃えで改行したい場合があります。
中央に配置しつつ、改行は左揃えにしたい
サンプル
センタリングで表示させつつ、
改行は左揃えに。
改行は左揃えに。
CSS
div{text-align:left; *text-align:center; display:table; margin:0 auto;}
div span{text-align:left; display: inline-block;}
div span{text-align:left; display: inline-block;}
HTML
<div><span>センタリングで表示させつつ、<br>改行は左揃えに。</span></div>
右に配置しつつ、改行は左揃えにしたい
サンプル
右寄せで表示させつつ、
改行は左揃えに。
改行は左揃えに。
CSS
div{text-align:left; *text-align:right; display:table; margin:0 0 0 auto;}
div span{text-align:left; display: inline-block;}
div span{text-align:left; display: inline-block;}
HTML
<div><span>右寄せで表示させつつ、<br>改行は左揃えに。</span></div>
（Safari、Firefox、IE6、IE7、IE8で確認）
ONE COMMENT
Comment RSS feed for this Articleこれはやりたいとあるよ。
display:tableなんてプロパティあったんだ。