Question

在这一点上，我感到很沮丧，并且困扰着我，直到无法解决为止，所以我决定切换我在github站点上输入图像的方式，这是一个专门用于猫的小型模因站点，一个画廊网站，我无法将这些图像水平居中放置在页面中心，

var images = ['ghc1', 'ghc2', 'ghc3', 'ghc4', 'ghc5', 'ghc6', 'ghc7',
  'ghc8', 'ghc9', 'ghc10', 'ghc11', 'ghc12', 'ghc13', 'ghc14', 'ghc15',
  'ghc16'
];
var container = document.querySelector('#images');
images.forEach(function(file) {
  var img = document.createElement('img');
  img.src = 'images/ghc/' + file + '.jpg';
  container.appendChild(img);
});

.header {
  text-align: center;
  padding: 32px;
}

.footer {
  text-align: center;
  padding: 32px;
}

body {
  background-color: #87CEEB;
}

#images>img {
  margin: 10px;
  border: 3px solid #000;
  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
  max-width: 25vw;
  -ms-flex: 25%;
  /* IE10 */
  flex: 25%;
  max-width: 50%;
  vertical-align: middle;
}

#images {
  margin: 0 auto;
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Girls + Cats</title>
</head>

<body>
  <div class="header">
    <img alt="Girls + Cats" src="images/girlsholdingcats.png">
  </div>
  <div id="images" class=images>

  </div>
  <div class="footer">
    <a href="index.html"><img alt="Home Page" src="images/homepage.png"></a>
  </div>
</body>

</html>

Answer 1

display: flex;属性需要应用于容器。

我刚刚将#images CSS更改为：

#images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

并从图像中删除了display: flex。

您修改的代码：

var images = ['ghc1', 'ghc2', 'ghc3', 'ghc4', 'ghc5', 'ghc6', 'ghc7',
  'ghc8', 'ghc9', 'ghc10', 'ghc11', 'ghc12', 'ghc13', 'ghc14', 'ghc15',
  'ghc16'
];
var container = document.querySelector('#images');
images.forEach(function(file) {
  var img = document.createElement('img');
  img.src = 'images/ghc/' + file + '.jpg';
  container.appendChild(img);
});

.header {
  text-align: center;
  padding: 32px;
}

.footer {
  text-align: center;
  padding: 32px;
}

body {
  background-color: #87CEEB;
}

#images > img {
  margin: 10px;
  border: 3px solid #000;
  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
  width: 25%;
  height: auto;
}

#images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Girls + Cats</title>
</head>

<body>
  <div class="header">
    <img alt="Girls + Cats" src="images/girlsholdingcats.png">
  </div>
  <div id="images" class=images>

  </div>
  <div class="footer">
    <a href="index.html"><img alt="Home Page" src="images/homepage.png"></a>
  </div>
</body>

</html>

Answer 2

我更改了js代码和CSS代码

var images = ['ghc1', 'ghc2', 'ghc3', 'ghc4', 'ghc5', 'ghc6', 'ghc7',
  'ghc8', 'ghc9', 'ghc10', 'ghc11', 'ghc12', 'ghc13', 'ghc14', 'ghc15',
  'ghc16'
];
var container = document.querySelector('#images');
images.forEach(function(file) {
  var img = document.createElement('img');
  img.src = 'images/ghc/' + file + '.jpg';
  var div = document.createElement('div');
  div.className = 'flex'
  div.appendChild(img)
  container.appendChild(div);
});

.header {
  text-align: center;
  padding: 32px;
}

.footer {
  text-align: center;
  padding: 32px;
}

body {
  background-color: #87CEEB;
}

.flex>img {
  margin: 0 auto;
  border: 3px solid #000;
  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
  max-width: 100%;
}
.flex{
  width: 25%;
  display: flex;
}
#images {
  display: flex;
  flex-wrap: wrap;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Girls + Cats</title>
</head>

<body>
  <div class="header">
    <img alt="Girls + Cats" src="images/girlsholdingcats.png">
  </div>
  <div id="images" class=images>

  </div>
  <div class="footer">
    <a href="index.html"><img alt="Home Page" src="images/homepage.png"></a>
  </div>
</body>

</html>

如何以Javascript数组为中心获取图像

2 个答案: