Table td vertical-align: middle

使用環境

Name	Version
Uikit	3.17.11
boxicons	2.1.4

前書き

vertical-alignは、inlineとinline-blockとtable-cellで、設定します。*1

検索すると、vertical-align: middleが効かない旨の記事は多いのです。

しかし、table-cell のtdタグでvertical-align: middleが効かない記事は、簡単には見つかりません。

本題

下記のソースコードは、trタグの中に４つのtdタグがあります。

• １つ目のtdタグは、アイコンが表示されるボタン
• ２つ目と３つ目のtdタグは、テキスト
• ４つ目のtdタグも、１つ目と同じアイコン表示のボタン
• uk-table-middleで、tdタグにvertical-align: middle
• buttonタグにuk-text-middleを記述したが変わらなかったので、削除した

失敗図1の通り、アイコンとテキストが、縦中央の配置に揃いません。

親要素であるtdタグやbuttonタグにvertical-align: middleを指定しても、駄目なのです。

テキストとボタン（アイコン）のheightやline-heightが違うのが、原因なのでしょうか？

失敗図1

<table class="uk-table uk-table-middle uk-table-striped uk-table-small">
  <thead>
    <tr>
      <th class="uk-text-small uk-text-center uk-width-1-6">詳細</th>
      <th class="uk-text-small uk-text-center">都道府県名</th>
      <th class="uk-text-small uk-text-center">市町村計</th>
      <th class="uk-text-small uk-text-center">市町村一覧</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="uk-text-center">
        <button class="uk-button uk-button-link uk-text-primary">
          <i class="bx bx-20px bxs-info-circle"></i>
        </button>
      </td>
      <td class="uk-text-small uk-text-center">北海道</td>
      <td class="uk-text-small uk-text-center">185</td>
      <td class="uk-text-center">
        <button class="uk-button uk-button-link uk-text-primary">
          <i class="bx bx-20px bx-caret-right-circle"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

成功例(1)

iタグのクラスを、buttonタグに記述することで、縦中央に配置しました。

20pxの例

成功図1

<td class="uk-text-center">
  <button class="uk-button uk-button-link bx bx-20px bxs-info-circle"></button>
</td>

24pxの例

成功図2

<td class="uk-text-center">
  <button class="uk-button uk-button-link bx bx-24px bxs-info-circle"></button>
</td>

おそらく、uk-buttonにvertical-align: middleがあるからだと思います。*2

成功例(2)

tdタグの中にdivを入れて、Flexboxで上下左右中央にする。

<td class="uk-text-center">
  <div class="uk-flex uk-flex-center uk-flex-middle">
    <button class="uk-button uk-button-link uk-text-primary uk-flex">
      <i class="bx bx-24px bx-info-circle"></i>
    </button>
  </div>
</td>

Tailwind CSSのCatalystを参考にしました。

他のCSSフレームワーク

Uikitに限らず、Bootstrap5.3.2でも同じでした。*3

Bulma0.9.4は、上記のようにbuttonに追記すると、枠線が表示され、縦横中央に表示されるので、ボタンぽく見えます。*4

tdタグの中に、iタグだけを記述した場合、CSSに下記の追加が必要でした。

  td>* {
    vertical-align: middle;
  }

或いは

.bx-20px {
  font-size: 1.25rem!important;
  vertical-align: middle;
}

<td class="has-text-centered">
  <i class="bx bx-20px bxs-info-circle"></i>
</td>

補足

Boxiconsは、サイズが変更できるのですが、bs-smだと24.8pxになるので、設定をみるとfont-size: 1.55remでした。

それで、下記のようなクラスを作りました。

.bx-24px {
  font-size: 1.5rem!important;
}

感想

NunjucksでHTMLを生成していて、extendsを読み込まず、htmlタグやbodyタグがない状態だと、縦中央に配置されていました。

CSSリセットが関係あるのかな？と思って、heightやline-heightなど、色々調べてみましたけど、原因はわかりませんでした。

後書き

taneppa.net

tomotan.hateblo.jp

この記事を公開した後、上記の記事を見つけました。

tdタグはtable-cellで、buttonタグやiタグは、inline-blockですが、何か違いがあるみたいです。

*1:Bootstrapによると、inline-tableも影響するって書いてあります

*2:Firefoxのウェブ開発ツールで確認

*3:btn に vertical-align: middle がありました

*4:枠線が必要ない時もあるので、悩ましい