Как получить изображения в массиве Javascript по центру - PullRequest
Новая
       15

Как получить изображения в массиве Javascript по центру

0 голосов
/ 03 сентября 2018

Я настолько озадачен этим моментом, и это бесит меня до бесконечности, что я не могу понять это, поэтому я решил переключить способ ввода изображений на свой сайт 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 ]

0 голосов
/ 03 сентября 2018

Я изменил код 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>
0 голосов
/ 03 сентября 2018

Свойство 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>
...