ふわふわぷかぷか

javaって何?から始めた初心者のandroidアプリ開発メモ。でも最近はイラレにはまってます。

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

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

こんな感じ↓
f:id:fuwafuwapukapuka:20150112215900p:plain

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

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

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

f:id:fuwafuwapukapuka:20150112221208p:plain     f:id:fuwafuwapukapuka:20150112221212p:plain

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>を中央に配置しています。

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

f:id:fuwafuwapukapuka:20150112222512p:plain f:id:fuwafuwapukapuka:20150112222531p:plain f:id:fuwafuwapukapuka:20150112222537p:plainこの3つの絵の説明文です。

 

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