垂直和水平居中对齐HTML正文内容

我有一个JSFIDDLE创建位置，我粘贴了从另一个堆栈交换线程在线拾取的代码，以显示如何使用滚动来响应表格。我在测试方法时修改了代码，它在我的机器上运行良好。我遇到的唯一问题是整个桌子是顶部对齐的。我只是无法弄清楚需要改变什么属性，以便让整个桌子既水平又中心对齐。如果任何大师有任何建议将是伟大的！垂直和水平居中对齐HTML正文内容

的的jsfiddle是here

background-size: 50px 50px; 
background-color: #fff; 
background-size: 50px 50px; 
vertical-align: middle;

我尝试添加垂直对齐：中间

似乎不起作用

而且实际的图像是底部的TD内对齐。是否有可能让他们居中对齐。

谢谢

谢谢！

来源

2016-03-09 Rian

尝试Flexbox的：http://stackoverflow.com/a/33049198/3597276 –

在受支持的浏览器（大多数）中，您可以将top：50％/ left：50％与translateX（-50％）translateY（-50％）组合使用以动态垂直/水平居中元素。

.container { 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-50%);}

http://jsfiddle.net/47x60k4w/show/

来源

2016-03-09 05:13:48

感谢Jayanit。！这工作。该问题的另一部分与实际的图像没有关联。虽然图像被破坏，但边界是可见的。你会注意到第一个图像是底部对齐的。我尝试了TD的valign =“Middle”，但那没有奏效。 – Rian

垂直和水平居中对齐HTML正文内容

回答

相关问题