tableを使用せず、左右にボックスを用意して文字を中央よりにする

レスポンシブにするとtableタグはスマホではカスタマイズが大変なので、できればspanやdivで横並びのレイアウトを作りたい。

しかし、文字は中央寄せが難しい。

以下が参考。

html

    <div id="block">
        <div class="box">
            <span class="header">ヘッダーテキスト</span><span class="title"><span class="inner"><span class="text">タイトル</span></span></span>
        </div>
    </div>

CSS

横幅1000pxで、テキストが二行になっても中央よりになるよう設定

  #block {
    background: #FFF;
    font-size: 16px;
  }
  #block .view {
    width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
    overflow: hidden;
  }
  #block .view .header {
    display: inline-block;
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    font-size: 144%;
    width: 350px;
  }
  #block .view .title {
    display: inline-block;
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    width: 650px;
  }
  #block .view .title .inner {
    display: inline-block;
    line-height: 100px;
    vertical-align: middle;
  }
  #block .view .title .inner .text {
    display: inline-block;
    line-height: 135%;
    vertical-align: middle;  
  }

インラインなので、vertical-align: middleをかけておく。

テキストは二行になると、line-heightの設定で大きくなってしまうので、さらにspanで区切ってline-heightを小さくかける。