I'm having trouble centering an image added via Javascript within a table using my embedded CSS. Can someone guide me on how to adjust the CSS to center the image in the table? I've tried setting the margin property to auto for the image, but it's not centering within the 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>
Johannes provided the correct solution for this issue. Below is the updated embedded style:
<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>