html - 居中添加Javascript的图像

我无法使用嵌入式CSS在表格内居中添加Javascript的图像。请让我知道如何修复CSS，以使表格中的图像居中。我尝试将图像的margin属性设置为auto，但是表中的图像未居中。

<html>
<head>
<title>Today's Events at the TRU Union</title>
    <style>
        p {text-align: center;}
        table {display: block; margin: auto;}
        body img{display: block;margin-left:auto;margin-right:auto;}
        h2 {text-align: center; color: red;}
    </style>

</head>
<body background="Back01.jpg" text="black">
    <div id="table"></div>
</body>
<script>
        function determine_picture_day_and_month(){
            var table_content = insert_table();
            table_content += insert_title_rules_and_image();
            return table_content;
        }

        function insert_table(){
            var daily_images = ["Weekend.gif", "Monday.gif", "Tuesday.gif", "Wednesday.gif",
                            "Thursday.gif", "Friday.gif", "Weekend.gif"];
            var days = ["Sunday", "Monday", "Tuesday", "Wednesday",
            "Thursday", "Friday", "Saturday"];
            var months = ["January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"];
            var dateObject = new Date();

            var current_image = daily_images[dateObject.getDay()];
            var currentday = days[dateObject.getDay()];
            var currentmonth = months[dateObject.getMonth()];

            var table_content = "<table border='1' cellpadding='5'>"
            table_content += "<tr><td width='100'>" + currentday +
            "</td><td><img src='" + current_image + "' /></td></tr></table>";
            table_content += "<p>Today is " + currentday + ", " + currentmonth +
                " " + dateObject.getDate() + "</p>";
            return table_content;
        }

        function insert_title_rules_and_image(){
            var table_content = "<h2>TRU Student Union Daily Schedule</h2>";
            table_content += "<hr /><img src='Events.gif' /><hr />";
            return table_content;
        }
        document.getElementById("table").innerHTML = determine_picture_day_and_month();
    </script>
</html>

约翰尼斯回答了这个问题。正确的嵌入样式如下：

     <style>
        p {text-align: center;}
        table { margin: auto;}
        body img{display: block;margin-left:auto;margin-right:auto;}
        h2 {text-align: center; color: red;}
    </style>

最佳答案

首先，将display: block分配给table元素与通常使用的表相反-该表中的tr和td元素很可能不会像在常规表中那样起作用。所以我建议从CSS中为display: block删除table

其次，要将（表格中的）任何内联或内联块元素（包括图像）居中放置在表格或块元素中，可以将text-align: center用于该元素。

要将另一个块元素居中放置在一个块元素内，应为子元素定义一个固定的宽度和margin: 0 auto。

关于html - 居中添加Javascript的图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49723670/