我在这一点上很难过，它让我无所事事，我无法弄清楚所以我决定改变我在github网站上输入图像的方式它是一个专门用于猫的小型meme网站，它是一个画廊网站我无法将这些图像水平居中到页面的中心，我的代码在下面
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>需要将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>我改变了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>