文章を両端揃えで表示する方法

通常、web上の文章は、左端から開始されて表示されます。使用するフォントによっては、右端が不揃いになる場合もあります。特に気にすることではありませんが、どうしてもデザイン上、文章の両端を揃えて表示させたいということがあった場合、CSSを使って制御することができます。

均等割り付けの指定方法

文章の両端を揃えて表示させるためには、text-alignプロパティを使うだけで実現できます。

p {
  text-align: justify;
}

これだけで、文章は均等割り付けで表示されるようになります。多くのブラウザでは問題なく表示されますが、IEはこれでは文章の両端は揃いません。そこで、IEも均等割り付けになるようにtext-justifyプロパティを追加します。

p {
  text-align: justify;
  text-justify: inter-ideograph;
}

これで、IEでも両端揃えで表示されるようになります。
そこまで、利用することもないと思いますが、整頓されたデザインにしたい場合には試せるかもしれません。

その他の記事
CSS3の背景画像指定について
WordPressでウィジェットを使う
【Sass】@extendの使い方
縦書きカラムレイアウトの作り方【モバイル対応】
CSSでヴィンテージ風の文字を作る方法

TOP