0

我编写了这个 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>
4

5 回答 5

2

你应该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了你的代码

这是您问题

编辑：

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

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

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

于 2012-09-06T10:32:29.710 回答
1

There is no td specified. Add td after the tr and give align="center" to the table tag". And remove the position:fixed if it is really not necessary

Check the demo here http://jsfiddle.net/2QnE9/2/

于 2012-09-06T10:29:10.503 回答
0

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

例子

width:500px;
margin-left:auto;
margin-right:auto;
于 2012-09-06T10:30:16.090 回答
0

看演示

这是CSS：

    #mytable
    {
    position:fixed;
    left:50%;
    top:50%;
    //set margin-left and margin-top to get it to center.
    }
于 2012-09-06T10:31:44.377 回答
0

尝试这个

<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>
于 2012-09-06T10:32:09.943 回答