如何在 Javascript 数组中获取图像居中
[英]How do I get images in Javascript array centered
问题描述
我在这一点上很难过，它一直困扰着我，我无法弄清楚，所以我决定改变在我的 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>
2 个解决方案
解决方案1
0 2018-09-03 18:20:46
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>
解决方案2
0 2018-09-03 18:21:30
我改了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在画布上创建并绘制图像数组？
[英]How do I create and draw an array of images on a canvas using Javascript?
如何从 Javascript 中的 6 个图像数组中获取 4 个随机图像
[英]How to get 4 random images out of array of 6 images in Javascript
如何从 Javascript 中的数组中获取元素的随机组合？
[英]How do i get a random combination of elements from an array in Javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.