0

私はテーブルを持っています（ページ上のテーブルのみ）。1 つの行と 1 つのセルがあります。

このセルのコンテンツをページの垂直方向および水平方向の中央に配置したいと考えています。こんなhtmlやcssでやっています。

HTML:

<table>
  <tr><td>keks</td></tr>
</table>

CSS:

html, body, table, tr, td {
  width: 100%;
  height: 100%;
}

td {
  text-align: center;
  vertical-align: middle;
}

ただし、このアプローチではスクロールバー (垂直方向と水平方向の両方) が追加されます。スクロールバーを削除するには? scrollbar: hiddenセルのコンテンツでそれらを削除すると、ページの中央に表示されなくなります。それは少し低くて右になります。

また、私のアプローチが正しくない可能性があり、スクロールバーを追加せずにこれを達成でき、コンテンツが中央に表示されます。

例を次に示します: https://jsfiddle.net/0tpL9o7e/

4

3 に答える 3

1

HTML のマージン値が自動的に定義されます。このためにスクロールバーが表示されます...最初にそれらをリセットする必要があります。

* {
  margin:0;
  padding:0
}

table{
  width: 100vw;
  height: 100vh
}

td {
  text-align: center;
  vertical-align: middle;
}
<table>
  <tr><td>keks</td></tr>
</table>

于 2018-12-29T13:10:13.853 に答える