[英]Need help aligning a table in the center in html
我應該先說我根本不擅長編碼,所以這個問題可能很愚蠢。 所以我根據我在網上找到的類似東西的源代碼制作了自己的自定義排序器。 這意味着我復制了它並根據自己的喜好對其進行了編輯。 我對一切的結果感到滿意,但是有一件事讓我很煩惱。 選擇的主表不在中心,而是出現在右側,即使在代碼中它應該與中心對齊。 我試過改變寬度、邊距和一大堆其他值,但似乎沒有任何效果。 對此可能有一個非常簡單的解決方案,但我太愚蠢了,無法弄清楚。 對 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;
}
//リストのソート+++++++++++++++++++++++++++++++++++++++++++
//flag:Don't know characters
// -1:Chose the left
// 0:Tie
// 1: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+++++++++++++++++++++++++++++++++++++++++++++++
//順位=Rank/Grade/Position/Standing/Status
//名前=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> ```
我認為您的主要問題是:
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;
}
我可以看到您已經嘗試了很多東西(甚至是已棄用的<center>
標簽)。 在此處查看此簡單示例: https://jsfiddle.net/z1h2os3r/1/
請注意,將主體的width
設置為固定的 px 值是不好的做法。 應該避免這種情況。 我將刪除您將表格居中的所有嘗試,並以 jsfiddle 為例再次嘗試。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.