Need help aligning a table in the center in html-CodePudding

I should preface this by saying I am not good at coding at all, so this question might be stupid. So I've made my own custom sorter based on the source code of something similar I found online. Which means I copied it and edited it to my liking. I am happy with how everything turned out, however there is one thing that bugs me. The main table of choices is not in the center but appears to the right, even though in the code it's supposed to be aligned with the center. I've tried changing the width, the margins and a whole bunch of other values but nothing seems to work. There is probably a very simple solutions to this, but I am just too stupid to figure it out. Can somebody with a little bit of experience with html tell me how to fix it?

Here is what it looks like now

Here is the code:

 
<script type="text/javascript">
 
var namMember = new Array(
 
"Apple<br /><img width=\"500px\" src=\"https://i.imgur.com/q9OaXXS.jpg\">",
 
"Banana<br /><img width=\"500px\" src=\"https://i.imgur.com/hgMyxCT.jpg\">",
 
"Orange<br /><img width=\"500px\" src=\"https://i.imgur.com/1Ny7awK.jpg\">",
 
"Strawberry<br /><img width=\"500px\" src=\"https://i.imgur.com/pCj8H6H.jpg\">",
 
"Lemon<br /><img width=\"500px\" src=\"https://i.imgur.com/PidWsgh.jpg\">",
 
"Pineapple<br /><img width=\"500px\" src=\"https://i.imgur.com/9Sxljvw.png\">",
 
"Cherry<br /><img width=\"500px\" src=\"https://i.imgur.com/wD6Vutw.jpg\">",
 
"Grapefruit<br /><img width=\"500px\" src=\"https://i.imgur.com/2pTvwuN.jpg\">",
 
"Blackberry<br /><img width=\"500px\" src=\"https://i.imgur.com/TF4onGV.jpg\">",
 
"Pomegranate<br /><img width=\"500px\" src=\"https://i.imgur.com/PtwGXqa.jpg\">",
);
 
 
 
//*********************************************************
 
 
 
var lstMember = new Array();
 
var parent = new Array();
 
var equal = new Array();
 
var rec = new Array();
 
var cmp1,cmp2;
 
var head1,head2;
 
var nrec;
 
 
 
var numQuestion;
 
var totalSize;
 
var finishSize;
 
var finishFlag;
 
 
 
//The initialization of the variable                                             
 
function initList(){
 
var n = 0;
 
var mid;
 
var i;
 
 
 
//The sequence that you should sort
 
lstMember[n] = new Array();
 
for (i=0; i<namMember.length; i  ) {
 
lstMember[n][i] = i;
 
}
 
parent[n] = -1;
 
totalSize = 0;
 
n  ;
 
 
 
for (i=0; i<lstMember.length; i  ) {
 
//And element divides it in two/more than two
 
//Increase divided sequence of last in first member
 
if(lstMember[i].length>=2) {
 
mid = Math.ceil(lstMember[i].length/2);
 
lstMember[n] = new Array();
 
lstMember[n] = lstMember[i].slice(0,mid);
 
totalSize  = lstMember[n].length;
 
parent[n] = i;
 
n  ;
 
lstMember[n] = new Array();
 
lstMember[n] = lstMember[i].slice(mid,lstMember[i].length);
 
totalSize  = lstMember[n].length;
 
parent[n] = i;
 
n  ;
 
}
 
}
 
 
 
//Preserve this sequence
 
for (i=0; i<namMember.length; i  ) {
 
rec[i] = 0;
 
}
 
nrec = 0;
 
 
 
//List that keeps your results
 
//Value of link initial
 
// Value of link initial
 
for (i=0; i<=namMember.length; i  ) {
 
equal[i] = -1;
 
}
 
 
 
cmp1 = lstMember.length-2;
 
cmp2 = lstMember.length-1;
 
head1 = 0;
 
head2 = 0;
 
numQuestion = 1;
 
finishSize = 0;
 
finishFlag = 0;
 
}
 
 
 
//&#12522;&#12473;&#12488;&#12398;&#12477;&#12540;&#12488;                                           
 
//flag&#65306;Don't know characters
 
// -1&#65306;Chose the left
 
// 0&#65306;Tie
 
// 1&#65306;Chose the right
 
function sortList(flag){
 
var i;
 
var str;
 
 
 
//rec preservation
 
if (flag<0) {
 
rec[nrec] = lstMember[cmp1][head1];
 
head1  ;
 
nrec  ;
 
finishSize  ;
 
while (equal[rec[nrec-1]]!=-1) {
 
rec[nrec] = lstMember[cmp1][head1];
 
head1  ;
 
nrec  ;
 
finishSize  ;
 
}
 
}
 
else if (flag>0) {
 
rec[nrec] = lstMember[cmp2][head2];
 
head2  ;
 
nrec  ;
 
finishSize  ;
 
while (equal[rec[nrec-1]]!=-1) {
 
rec[nrec] = lstMember[cmp2][head2];
 
head2  ;
 
nrec  ;
 
finishSize  ;
 
}
 
}
 
else {
 
rec[nrec] = lstMember[cmp1][head1];
 
head1  ;
 
nrec  ;
 
finishSize  ;
 
while (equal[rec[nrec-1]]!=-1) {
 
rec[nrec] = lstMember[cmp1][head1];
 
head1  ;
 
nrec  ;
 
finishSize  ;
 
}
 
equal[rec[nrec-1]] = lstMember[cmp2][head2];
 
rec[nrec] = lstMember[cmp2][head2];
 
head2  ;
 
nrec  ;
 
finishSize  ;
 
while (equal[rec[nrec-1]]!=-1) {
 
rec[nrec] = lstMember[cmp2][head2];
 
head2  ;
 
nrec  ;
 
finishSize  ;
 
}
 
}
 
 
 
//Processing after finishing with one list
 
if (head1<lstMember[cmp1].length && head2==lstMember[cmp2].length) {
 
//List the remainder of cmp2 copies, list cmp1 copies when finished scanning
 
while (head1<lstMember[cmp1].length){
 
rec[nrec] = lstMember[cmp1][head1];
 
head1  ;
 
nrec  ;
 
finishSize  ;
 
}
 
}
 
else if (head1==lstMember[cmp1].length && head2<lstMember[cmp2].length) {
 
//List the remainder of cmp1 copies, list cmp2 copies when finished scanning
 
while (head2<lstMember[cmp2].length){
 
rec[nrec] = lstMember[cmp2][head2];
 
head2  ;
 
nrec  ;
 
finishSize  ;
 
}
 
}
 
 
 
//When it arrives at the end of both lists
 
//Update a pro list
 
if (head1==lstMember[cmp1].length && head2==lstMember[cmp2].length) {
 
for (i=0; i<lstMember[cmp1].length lstMember[cmp2].length; i  ) {
 
lstMember[parent[cmp1]][i] = rec[i];
 
}
 
lstMember.pop();
 
lstMember.pop();
 
cmp1 = cmp1-2;
 
cmp2 = cmp2-2;
 
head1 = 0;
 
head2 = 0;
 
 
 
//Initialize the rec before performing the new comparison
 
if (head1==0 && head2==0) {
 
for (i=0; i<namMember.length; i  ) {
 
rec[i] = 0;
 
}
 
nrec = 0;
 
}
 
}
 
 
 
if (cmp1<0) {
 
str = "Battle #" (numQuestion-1) "<br>" Math.floor(finishSize*100/totalSize) "% sorted.";
 
document.getElementById("battleNumber").innerHTML = str;
 
 
 
showResult();
 
finishFlag = 1;
 
}
 
else {
 
showImage();
 
}
 
}
 
 
 
//The results                                               
 
//&#38918;&#20301;=Rank/Grade/Position/Standing/Status
 
//&#21517;&#21069;=Identification term
 
function showResult() {
 
var ranking = 1;
 
var sameRank = 1;
 
var str = "";
 
var i;
 
 
 
str  = "<table style=\"width:200px; font-size:29px; line-height:120%; margin-left:auto; margin-right:auto; border:1px solid #000; border-collapse:collapse\" align=\"center\">";
 
str  = "<tr><td style=\"color:#ffffff; background-color:#000; text-align:center;\">Rank<\/td><td style=\"color:#ffffff; background-color:#000; text-align:center;\">Character<\/td><\/tr>";
 
 
 
for (i=0; i<namMember.length; i  ) {
 
str  = "<tr><td style=\"border:1px solid #000; text-align:center; padding-right:5px;\">" ranking "<\/td><td style=\"border:1px solid #000; padding-left:5px;\">" namMember[lstMember[0][i]] "<\/td><\/tr>";
 
if (i<namMember.length-1) {
 
if (equal[lstMember[0][i]]==lstMember[0][i 1]) {
 
sameRank  ;
 
} else {
 
ranking  = sameRank;
 
sameRank = 1;
 
}
 
}
 
}
 
str  = "<\/table>";
 
 
 
document.getElementById("resultField").innerHTML = str;
 
}
 
 
 
//Indicates two elements to compare                                   
 
function showImage() {
 
var str0 = "Battle #" numQuestion "<br>" Math.floor(finishSize*100/totalSize) "% sorted.";
 
var str1 = "" toNameFace(lstMember[cmp1][head1]);
 
var str2 = "" toNameFace(lstMember[cmp2][head2]);
 
 
 
document.getElementById("battleNumber").innerHTML = str0;
 
document.getElementById("leftField").innerHTML = str1;
 
document.getElementById("rightField").innerHTML = str2;
 
 
 
numQuestion  ;
 
}
 
 
 
//Convert numeric value into a name (emoticon)                               
 
function toNameFace(n){
 
var str = namMember[n];
 
 
 
 
 

 
return str;
 
}
 
 
</script>
 
<style type="text/css">
 
#mainTable{
 
font-size: 29px;
 
font-family: 'Josefin Slab', serif;
 
text-align: center;
 
vertical-align: middle;
 
width: 410px;
 
margin-left: auto;
 
margin-right: auto;
 
border-collapse: separate;
 
border-spacing: 10px 5px;
 
}
 
#leftField{
 
width: 120px;
 
height: 150px;
 
border: 1px solid #000;
 
cursor: pointer;
 
}
 
#rightField{
 
width: 120px;
 
height: 150px;
 
border: 1px solid #000;
 
cursor: pointer;
 
}
 
.middleField{
 
width: 120px;
 
height: 70px;
 
border: 1px solid #000;
 
cursor: pointer;
 
}
 
a{
 
color: #5b17ba;
 
text-decoration : none;
 
}
 
a:hover{
 
color: #945ce3;
 
}
 
body {
 
width: 600px;
 
margin: 0 auto;
 
font-family: 'Josefin Slab', erif;
 
}
 
</style>
 
 
<body text="#000000" bgcolor="#ffffff" link="#0099ff" vlink="#0099ff" alink="#0099ff">
 
 
 
<p >
<center>
<strong>Welcome to Spiridon's fruit sorter!</strong><br />Pick who you like best in each battle to get an accurate list of your<br />favorite characters from the show. Have fun and choose wisely!<br /><br />Hitting 'no opinion' or 'I like both' frequently will make your results turn out weird.<br><br></center>
 
 
 
</p>
 
 
 
<table id="mainTable" align="center">
 
<tbody><tr>
 
<td id="battleNumber" colspan="3" style="padding-bottom: 10px;" style="text-align:center;"><b>Battle #1<br>0% sorted.</b></td>
 
</tr>
 
<tr>
 
<td id="leftField" onclick="if(finishFlag==0) sortList(-1);" rowspan="2" style="text-align:center;"></td>
 
<td  onclick="if(finishFlag==0) sortList(0);" style="text-align:center;">
 
I Like Both
 
</td>
 
<td id="rightField" onclick="if(finishFlag==0) sortList(1);" rowspan="2"style="text-align:center;"></td>
 
</tr>
 
<tr>
 
<td  onclick="if(finishFlag==0) sortList(0);"style="text-align:center;">
 
No Opinion
 
</td>
 
</tr>
 
</tbody></table>
 
<br><br>
 
<div id="resultField" style="text-align: center;">
 
<br>
 
</div>
 
<script type="text/javascript">
 
initList();
 
showImage();
 
 
</script>
 

<iframe scrolling="no" width="1" height="1" frameborder="0" style="background-color:transparent; overflow:hidden; position:absolute; top:0; left:0; z-index:9999;" id="ga_target"></iframe><script type="text/javascript">
    (function(){
        var analytics_frame = document.getElementById('ga_target');
        var analytics_iframe_loaded;
        var user_logged_in;
        var blog_is_nsfw = 'No';

        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
        eventer(messageEvent,function(e) {
            var message = (e.data && e.data.split) ? e.data.split(';') : '';
            switch (message[0]) {
                case 'analytics_iframe_loaded':
                    analytics_iframe_loaded = true;
                    postCSMessage();
                    postGAMessage();
                    break;
                case 'user_logged_in':
                    user_logged_in = message[1];
                    postGAMessage();
                    break;
            }
        }, false);

        
        function postGAMessage() {
            if (analytics_iframe_loaded && user_logged_in) {
                var is_ajax = false;
                analytics_frame.contentWindow.postMessage(['tick_google_analytics', is_ajax, user_logged_in, blog_is_nsfw, '/minisorter?route=custom_page'].join(';'), analytics_frame.src.split('/analytics.html')[0]);
            }
        }
        function postCSMessage() {
            COMSCORE = true;
            analytics_frame.contentWindow.postMessage('enable_comscore;'   window.location, analytics_frame.src.split('/analytics.html')[0]);
        }
    })();

 
</html> ```

CodePudding user response：

I think you main issue here is with this:

  var namMember = new Array(

        "Apple<br /><img width=\"500px\" src=\"https://i.imgur.com/q9OaXXS.jpg\">",

        "Banana<br /><img width=\"500px\" src=\"https://i.imgur.com/hgMyxCT.jpg\">",

        "Orange<br /><img width=\"500px\" src=\"https://i.imgur.com/1Ny7awK.jpg\">",

        "Strawberry<br /><img width=\"500px\" src=\"https://i.imgur.com/pCj8H6H.jpg\">",

        "Lemon<br /><img width=\"500px\" src=\"https://i.imgur.com/PidWsgh.jpg\">",

        "Pineapple<br /><img width=\"500px\" src=\"https://i.imgur.com/9Sxljvw.png\">",

        "Cherry<br /><img width=\"500px\" src=\"https://i.imgur.com/wD6Vutw.jpg\">",

        "Grapefruit<br /><img width=\"500px\" src=\"https://i.imgur.com/2pTvwuN.jpg\">",

        "Blackberry<br /><img width=\"500px\" src=\"https://i.imgur.com/TF4onGV.jpg\">",

        "Pomegranate<br /><img width=\"500px\" src=\"https://i.imgur.com/PtwGXqa.jpg\">",
    );

you have each image set to 500px, which is causing the problem.

you can try giving them a height with css for example max-height: 200px; and give them also object-fit: contain; // or cover depending on preference and setting the width = "100%"

EDIT

in order to use the full sizes of the images you need to do this to your body css:

body {
   width: 100%;
}

and this to your #mainTable:

#mainTable {
    width: fit-content;
}

CodePudding user response：

I can see you have tried a lot of things (even the deprecated <center> tag). See this simple example here: https://jsfiddle.net/z1h2os3r/1/

Notice, that it is bad practice to set the width of the body to a fixed px value. This should be avoided. I would remove all your attempts of centering the table and give it another try using the jsfiddle as example.