まとまったテキストを配置する際に、両端がずれているとちょっと気になることありますよね？WEBサイトでも紙面デザインのように「両端揃え」でテキストを配置したい場合は、CSSのみで実現可能ですので取り入れてみてください。
HTMLを記述する
サンプルとして以下のようなテキストを配置してみました。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="box type_b"> <p>恥の多い生涯を送って来ました。 自分には、人間の生活というものが、見当つかないのです。 自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。 自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、 ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。 しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、 ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、 のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。</p> </div> |
この<div class=”box type_b”>の中の<p>タグに記述されたテキストを両端揃えにしたいと思います。
CSSを記述する
|
1 2 3 4 |
.type_b{ text-align: justify; text-justify: inter-ideograph; /* IE */ } |
こちらの２行を記述するだけでOKです！
▼両端揃えにしない場合
▼両端揃えにした場合
右端の折り返し部分を確認してもらうと、両端揃えにした場合はきれいに揃っているのがわかると思います。揃えて配置したい箇所には「text-align: justify;」を指定してあげるときれいに揃いますので使ってみてください。