将 Javascript 添加的图像居中

Question

我无法将添加的 Javascript 图片置于 table 的中心位置，并嵌入了 CSS。请让我知道如何修复 CSS 以便 table 中的图像居中。我尝试将图像的边距属性设置为自动，但是 table 中的图像没有居中。

<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>

Answer 1

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

其次，要（水平）居中任何内联或 inline-block 元素（包括图像）within table 或块元素，您可以使用 text-align: center 该元素。

要使另一个块元素在块元素内居中，您应该为子元素定义固定宽度和 margin: 0 auto。

将 Javascript 添加的图像居中

Centering a Javascript-added Image

html

css

html-table

centering