html - 如何使表格标题居中？

Question

我在表格上有一个很长的标题，并希望它们都彼此中心对齐。

HTML:

<table>
  <caption>This is a very long caption.</caption>
  <tr>
    <td>1</td><td>2</td>
  </tr>
  <tr>
    <td>3</td><td>4</td>
  </tr>
</table>

CSS:

caption {
  white-space: nowrap;
}

https://codepen.io/anon/pen/RZyxzg

Answer 1

使用flexbox，使用align-items:center

table {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: red solid
}

<table>
  <caption>This is a very long caption.</caption>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>