居中添加 Javascript 的图像答案

【问题标题】：Centering a Javascript-added Image居中添加 Javascript 的图像
【发布时间】：2018-09-18 07:18:45
【问题描述】：

我无法使用嵌入的 CSS 将添加 Javascript 的图像置于表格的中心。请让我知道如何修复 CSS 以使表格中的图像居中。我尝试将图像的边距属性设置为自动，但表格中的图像没有居中。

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

【问题讨论】：

如果您没有固定的元素宽度，自动边距将不起作用

标签： html css html-table centering

【解决方案1】：

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

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

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

【讨论】：