代码之家 › 专栏 › 技术社区 › Sharikov Vladislav

如何使用不带滚动条的表格使元素居中?

center-align alignment css html

Sharikov Vladislav · 技术社区 · 6 年前

我有桌子(只有这一页的桌子)。它有一行和一个单元格。

我想在页面上垂直和水平居中显示此单元格的内容。我用这种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 单元格内容不在页面的中心。它会低一点,右一点。

另外,我的方法可能不正确,我可以在不添加滚动条的情况下实现这一点,内容将位于中间。

3 回复 | 直到 6 年前

Mordecai 6 年前

HTML有自动定义的边距值。此时会出现滚动条…你需要先重置它们。

* {
  margin:0;
  padding:0
}

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

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

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

Nikola 6 年前

我只需要在body元素上将页边距设置为0,因为这就是创建滚动条的原因。

也可以通过设置隐藏滚动 overflow:hidden 但是这样您可能会阻止您的用户看到稍后会出现的一些内容。

在基于WebKit的浏览器中,您可以使用 ::-webkit-scrollbar { display: none; } 虽然仍然可以滚动,但没有显示条。

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

body {
  margin: 0;
}

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

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

Carlo F. 6 年前

添加 溢出:隐藏 在 HTML 元素:

html {
  overflow: hidden; 
}

推荐文章

Riddhi · 在ionic中对齐按钮

7 年前

Joshua Sparkel · 排列的元素相差几个像素

7 年前

ProtectedVoid · CSS宽度自动和向左浮动-允许溢出

7 年前

Josh Rodgers · 居中网格项目

7 年前

Jean Jacquemier · Apache箭头、对齐和填充

7 年前

Zubair · 与UILabel绘图/显示在屏幕上相关的方法

7 年前

user7055375 · 除了“文本对齐:居中把东西放在一个DIV里?

7 年前

KevinM · 在导航栏引导程序4中将图标与文本对齐

7 年前

KhiladiBhaiyya · 如何将引导程序导航栏最左边的项移到更远的左边

7 年前

Sujal · UIAlertController中的居中对齐图像操作

7 年前