在页面中居中表格答案

【问题标题】：Center a table in the page在页面中居中表格
【发布时间】：2012-09-06 21:29:12
【问题描述】：

我编写了这段 HTML/JavaScript 代码，但我无法在页面中将表格居中。我已经尝试了 align=center 和 margin 样式。但似乎没有任何效果。甚至将表格放入 div 中。

编辑：更好的描述：我正在尝试从 IP 摄像机（小图片）拍摄四张照片，并让它们出现在全屏浏览器中，并在页面上居中并最大化。

这是代码：

<body style="margin:0; background-color:black;">
<table style="height:100%; background-color:black; position:fixed;">
    <tr>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera1"/>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera2"/>
    </tr>
    <tr>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera3"/>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera4"/>
    </tr>
</table>
</body>

<script language="JavaScript">
//<!--

function reloadImage()
{
    var now = new Date();
    var Camera = new Array()
    var Camera1 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=0&animation=0&name=aa&password=11&time=1346851800&pic_size=2'
    var Camera2 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=1&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851972719.719'
    var Camera3 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=2&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851974247.247'
    var Camera4 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=3&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851975678.678'

    if (document.images)
    {
        var image1 = new Image;
        var image2 = new Image;
        var image3 = new Image;
        var image4 = new Image;

        image1.onload = function () { document.images.Camera1.src = image1.src; }
        image2.onload = function () { document.images.Camera2.src = image2.src; }
        image3.onload = function () { document.images.Camera3.src = image3.src; }
        image4.onload = function () { document.images.Camera4.src = image4.src; }

        image1.src = Camera1 + '?' + now.getTime();
        image2.src = Camera2 + '?' + now.getTime();
        image3.src = Camera3 + '?' + now.getTime();
        image4.src = Camera4 + '?' + now.getTime();
    }
    setTimeout('reloadImage()',1000);
}

setTimeout('reloadImage()',1000);
//-->
</script>

【问题讨论】：

不要使用内联 CSS。这很糟糕，很糟糕，很糟糕。
不知道为什么，但如果我使用，它会将图片恢复到原始大小。
@jurgemaister 我应该用什么来代替它？为什么它是“坏的”？
很难阅读，很难维护，而且不是DRY。这就是为什么它被认为是不好的做法。此外，您的代码无效。我认为你可能有错误的方法来解决你的问题。尝试在您的问题中包含几行关于您尝试使用此代码实现的目标。
添加了我的目标的一些详细描述。

【解决方案1】：

你应该先学会写HTML。表的标记去 -

<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td>You img tag</td>
    <td>You img tag</td>
  </tr>
  <tr>
    <td>You img tag</td>
    <td>You img tag</td>
  </tr> <!-- And so on -->
</table>

您在代码中完全错过了TD

Here is the answer你的问题

编辑：

当您在TD 中添加img 标签时，使用width and height attributes，它将解决调整大小的问题-

<img src="img/imageName.jpg" width="400" height="400" alt="" title="" />

嘿，我使用了学习的东西，因为你在这里发布了问题，所以我假设你已经在处理 HTML。没关系！你为什么不试试HTML Fundamentals 这将帮助您很好地理解 HTML！ :)

【讨论】：

如果我放了，它会将图像调整为更小的图像，并且找不到任何方法来获得与相同的结果。如果您对此有答案，请写下来；如果我知道如何编写 HTML，我就不会在这里问了。
@Stefano 请检查编辑:)
别担心，没关系，这是我第一次用HTML编写代码，但我不能浪费这么多时间从头开始学习，我只是需要一个快速帮助来显示工厂IP办公室里的摄像头。
我会按照您的建议尝试并通知您。

【解决方案2】：

没有指定 td。在 tr 之后添加 td 并将align="center" 赋予表标签”。如果确实没有必要，请删除position:fixed

在此处查看演示 http://jsfiddle.net/2QnE9/2/

【讨论】：

如果我放了，它会将图像调整为更小的图像，并且找不到任何方法来获得与相同的结果。我需要固定位置以摆脱滚动条。我已经尝试过使用 align=center 但它不起作用。
如果你不放，那么它根本不是有效的代码。根据您的图像大小为表格指定宽度。
这些图像很小，只有 352x288，但我希望它们能将整个屏幕分成四部分。我尝试放置 weight=352 和，它没有居中并以原始分辨率显示图像。

【解决方案3】：

你需要给它一个固定的宽度，并将 margin-left 和 margin-right 设置为自动并从你的表格中删除固定位置

示例

width:500px;
margin-left:auto;
margin-right:auto;

【讨论】：

如果我删除了固定，那么它会显示滚动条，有没有办法避免这种情况？

【解决方案4】：

试试这个

<table align="center" style="height:100%;background-color:black; position:relative;">
    <tr><td>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera1"/>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera2"/>
    </td></tr>
    <tr><td>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera3"/>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera4"/>
    </td></tr>
</table>

【讨论】：

你试过整个代码吗？也许是因为我做过其他的烂摊子。
@Stefano 你能告诉我如何在你的代码中显示表格吗？您已将任何 html 控件用作显示表格的容器
抱歉，Harry，我没听懂，你在问我什么？
我用 div 和不用 div 都试过了。在这两种情况下都不起作用。

【解决方案5】：

See Demo

这里是CSS：

    #mytable
    {
    position:fixed;
    left:50%;
    top:50%;
    //set margin-left and margin-top to get it to center.
    }

【讨论】：

这不是在屏幕上居中...而是将表格的左上角放在中间，表格向右下方向外增长。
@thirdender 是的，我想他必须调整 margin-left 和 margin-top 属性来修复它。
是的，但是还有其他方法可以使对象在屏幕上居中，不需要知道对象的尺寸。 CSS Tricks: Centering in the Unknown 上的精彩文章。
我可以将我的表格放入链接建议的样式的 div 中吗？它会起作用吗？
@Stefano 是的，你可以这样做。