У меня есть div с изображениями и кнопками внутри. Кнопки центрируются, но изображения не центрируются, меняясь в зависимости от ширины страницы - PullRequest
Новая
       12

У меня есть div с изображениями и кнопками внутри. Кнопки центрируются, но изображения не центрируются, меняясь в зависимости от ширины страницы

1 голос
/ 05 апреля 2020

У меня есть div с двумя div внутри: div, содержащий три изображения, и один, содержащий кнопки. Кнопки расположены по центру, но изображения отказываются это делать. Как сделать так, чтобы они правильно центрировались, независимо от ширины страницы?

HTML: https://pastebin.com/jLy9vN3K

CSS: https://pastebin.com/gSWbF2HP

Результат: 

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: top;
  font-family: Lato;
  overflow: hidden;
  background-color: #333;
}

li.navitem {
  display: inline;
  float: left;
}

li.navitem>a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li.navitem>a:hover {
  background-color: #111;
}

.active {
  background-color: #a9a9a9;
  float: right;
}

li.active>a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.slide-container {
  width: 600;
  height: 400;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  text-align: center;
}

.image-container {
  width: 1800px;
  height: 400px;
  position: relative;
  transition: left 2s;
  -webkit-transition: left 2s;
  -moz-transition: left 2s;
  -o-transition: left 2s;
}

.slider-image {
  float: left;
  margin: 0px;
  padding: 0px;
}

.button-container {
  top: -20px;
  position: relative;
}

.slider-button {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: white;
}

#slider-image-1:target~.image-container {
  left: 0px;
}

#slider-image-2:target~.image-container {
  left: -600px
}

#slider-image-3:target~.image-container {
  left: -1200px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="script.js"></script>

  <ul class="topnav">
    <li class="navitem"><a href="index.html">Home</a></li>
    <li class="active"><a href="projects.html">Projects</a></li>
    <li class="navitem"><a href="upcoming.html">Upcoming</a></li>
    <li class="navitem"><a href="aboutme.html">About</a></li>
  </ul>

  <br>

  <div class="slide-container">
    <span id="slider-image-1"></span>
    <span id="slider-image-2"></span>
    <span id="slider-image-3"></span>
    <div class="image-container">
      <img src="https://dummyimage.com/600x400/000/fff" class="slider-image">
      <img src="https://dummyimage.com/600x400/a839a8/fff" class="slider-image">
      <img src="https://dummyimage.com/600x400/ffffff/000000" class="slider-image">
    </div>
    <div class="button-container">
      <a href="#slider-image-1" class="slider-button"></a>
      <a href="#slider-image-2" class="slider-button"></a>
      <a href="#slider-image-3" class="slider-button"></a>
    </div>
  </div>

</body>

</html>

1 Ответ

0 голосов
/ 05 апреля 2020

При добавлении margin: 0 auto; к классу .image-container изображения будут центрироваться на экране. 

.image-container {
    width: 1800px;
    height: 400px;
    position: relative;
    transition: left 2s;
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
    margin: 0 auto;
  }
...