テキストを左揃えのまま中央寄せにする方法

左揃えのまま中央寄せ？？

もう正直何言ってんだお前的なタイトルですが、要はこういうパターンです。

こんな風に「デバイステキスト使って好きなテキスト入れれるようにした上で、左揃えのままセンタリングしたい」なんて状況結構あります。

自分がマークアップ初心者の頃は、こんなレイアウトは出来ないものと勝手に思ってたのですが、実は簡単にできちゃいます。

どうするかというと、inline-blockの特性を活かしてやっちゃいます。

実例

実際のソースコードは以下のとおりです。

ソースコード

<style>
  .wrapper {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    background: #cccccc;
  }
  .txt {
    display: inline-block;
    text-align: left;
  }
</style>
<div class="wrapper">
  <p class="txt">
    ダミーテキスト<br>
    ダミー
  </p>
</div>
<!-- /.wrapper -->
<div class="wrapper" style="margin-top: 10px;">
  <p class="txt">
    ダミーテキストダミー<br>
    ダミー
  </p>
</div>
<!-- /.wrapper -->

表示

説明

上下のパターンの違いはテキストの長さが違う点だけなのですが、しっかり中央に配置してくれてますね？

肝は、テキストを入れているタグに「display: inline-block」を指定している所です。

CSSの display: inline、display: block、display: inline-block をマスターしよう！でも説明していますが、inline-blockはtext-alignの影響を受けるので、親要素にtext-align:centerを指定することで中央寄せにすることが出来ます。

ただ、そのままだとテキストも中央寄せになってしまいますので、親要素にはcenterを指定しつつ、子要素である「<p class=”txt”>」にtext-align:leftを指定することで、「テキストは左揃えにしつつ、テキスト全体としては中央に配置する」といったレイアウトにしている形です。

以上

今回のパターンも保守・運用のことを考えなければ、デバイステキストじゃなく画像でやってしまって解決する、なんてことも場合によってはありですが、それだとテキストを変える度に画像を作る必要が出てきて非常に面倒ですよね？

マークアップをする際は、デザイナの作成したカンプを再現しつつ、出来るだけ保守性を上げることを意識しないといけないですね。

以上、たにっぱでした〜