長い文字列の幅に合わせて中央配置して、改行・折り返しは左揃えにする方法。

前の記事では、短い文章は中央配置、折り返したときは左揃えになるようにしました。

こんな感じ↓

 今回は、長い方の文章の幅に合わせて中央配置して、文章の始まりや改行したときには左揃えになる方法です。

枠の幅をしっかり決める方法はあったのですが、幅が変わっても大丈夫な方法で、<li>や<table>を使わない方法が見つからなかったので。。。

イメージは↓みたいな感じ。

　　　　

css

.sample{
 display:inline-block;
 text-align:left;
 }

display:inline-block;で<div>を文字列の幅に合わせます。

text-align:left;で左揃えにします。

html

<div align="center">
　 <div class="sample">
　1つ目の文章<br/>
　2つ目の文章
　</div>
 </div>

<div class="sample">で文章全体を囲むことで、長い方の幅に<div>を合わせて左揃えにし、その<div>を中央に配置しています。

今回作ったホームページは「こちら」です。

　　この3つの絵の説明文です。

今回もドリームウィーバーではうまく表示されていなかったのですがFirefoxやChromeでは表示できていました。

今、見直すHTML ネット時代の、これから始めるプログラミング (ネット時代の、これから始めるプログラミング（NextPublishing）)