如何在 javascript 表中居中图像

How to Center an Image in a Javascript Table

本文关键字：中居 图像 javascript      更新时间：2023-09-26

你好！我有一个用Javascript制作的表格，第一个图像被推到左边。我希望它居中，但不确定我将如何实现这一目标？任何帮助将不胜感激！

页： thetotempole.ca/javascriptproject.html/

这是代码： 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Arrays</title>
<style>
#tbl img {
    -webkit-transition: -webkit-transform 0.5s ease;
          transition: transform 0.5s ease;
}
#tbl td:hover img {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
</style>
</head>
<body>
  <center><table id="tbl" border="1">
         <tr>
            <th>Product Name</th>
            <th>Product Description</th>
            <th>Product Images</th>
         </tr>
  </table>
<script>
         var today = new Date();
         var daynames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
         var monthnames = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
var products = [
  {
    name: "Apple",
    description: "It might be fruit, or it might be an iPhone",
    imageUrl: "images/apple.jpg"
  }, {
    name: "Dell",
    description: "Buy this one online at dell.com",
    imageUrl: "images/dell.jpg"
  }, {
    name: "IBM",
    description: "If you want a mainframe they still have some",
    imageUrl: "images/ibm.jpg"
  }, {
    name: "Toshiba",
    description: "Get a discount through SAIT (maybe)",
    imageUrl: "images/toshiba.jpg"
  }, {
    name: "Atari",
    description: "Try a classic gaming machine",
    imageUrl: "images/atari.jpg"
  }, {
    name: "Commodore",
    description: "64k should be enough for anyone",
    imageUrl: "images/commodore.jpg"
  }
];
var table = document.getElementById("tbl");
products.forEach(function(product) {
  var row = document.createElement("tr");
  row.appendChild(createCell(product.name));
  row.appendChild(createCell(product.description));
  row.appendChild(createImageCell(product.imageUrl));
  table.appendChild(row);
});
function createCell(text) {
  var cell = document.createElement("td");
  cell.innerText = text;
  return cell;
}
function createImageCell(url) {
  var image = document.createElement("img");
  image.setAttribute("src", url);
  var cell = document.createElement("td");  
  cell.appendChild(image);
  return cell;
}
            //Tuesday Nov. 5, 2013
            var dayofweek = daynames[today.getDay()];
            //alert(dayofweek);
            var month = monthnames[today.getMonth()];
            var dateofmonth = today.getDate();
            var year = today.getFullYear();
            alert(dayofweek + " " + month + ". " + dateofmonth + ", " + year);
            document.write(dayofweek + " " + month + ". " + dateofmonth + ", " + year);
</script>
</center>
</body>
</html>

谢谢！

如果您还想将左两列中的单词居中：

td { text-align: center; }

或

如果您只想将每行中的最后一项居中，只要您在每行中保持 3 个单元格的格式：

td:nth-child(3) { text-align: center; }

尝试在包含图像的 td 上使用以下样式：

vertical-align: middle;
text-align: center;

在这里检查这个小提琴

相关文章：