需要帮助在 html 的中心对齐表格

Question

我应该先说我根本不擅长编码，所以这个问题可能很愚蠢。 所以我根据我在网上找到的类似东西的源代码制作了自己的自定义排序器。 这意味着我复制了它并根据自己的喜好对其进行了编辑。 我对一切的结果感到满意，但是有一件事让我很烦恼。 选择的主表不在中心，而是出现在右侧，即使在代码中它应该与中心对齐。 我试过改变宽度、边距和一大堆其他值，但似乎没有任何效果。 对此可能有一个非常简单的解决方案，但我太愚蠢了，无法弄清楚。 对 html 有一点经验的人可以告诉我如何解决吗？

这是现在的样子

这是代码：

 
<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 class="instructions">
<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 class="middleField" 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 class="middleField" 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> ``` 

Answer 1

我认为您的主要问题是：

  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\">",
    );

您将每个图像设置为 500px，这导致了问题。

您可以尝试使用 css 给它们一个高度，例如max-height: 200px; 并给他们object-fit: contain; // or cover depending on preference object-fit: contain; // or cover depending on preference并设置width = "100%"

编辑

为了使用完整尺寸的图像，您需要对您的身体 css 执行此操作：

body {
   width: 100%;
}

这给你的#mainTable ：

#mainTable {
    width: fit-content;
}

Answer 2

我可以看到您已经尝试了很多东西（甚至是已弃用的<center>标签）。 在此处查看此简单示例： https://jsfiddle.net/z1h2os3r/1/

请注意，将主体的width设置为固定的 px 值是不好的做法。 应该避免这种情况。 我将删除您将表格居中的所有尝试，并以 jsfiddle 为例再次尝试。