Наложение картинки на слайдер

231

06 апреля 2017, 17:28

У меня есть картинка и слайдер, они одинаковых размеров и мне нужно наложить их на друг друга, но почему то даже не могу поставить эту картинку по середине через margin: 0 auto;, при этом я не хочу делать отступ в пикслеях, так как придется морочится с медиа запросами Так как это реализовать? Или хотяб пофиксить margin 0 auto

    <div class="txttop">Эксклюзивный Рандом!</div>
<br>
<div class="slbg"><img src="img/slbg.png"></div>
<div class="sl">
    <div class="slide"><img src="img/games/1.png"></div>
    <div class="slide"><img src="img/games/2.png"></div>
    <div class="slide"><img src="img/games/3.png"></div>
    <div class="slide"><img src="img/games/4.png"></div>
    <div class="slide"><img src="img/games/5.png"></div>
    <div class="slide"><img src="img/games/6.png"></div>
    <div class="slide"><img src="img/games/7.png"></div>
</div>
<div class="button"><a href="#">Испытать удачу за 49 рублей</a></div>
.sl {
width: 750px;
margin: 0 auto;
border: 3px solid #fff;
background-color: #fff;
padding: 17px 0px;
}
.slide img {
margin: 0 auto;
z-index: 1;
}
.slbg {
position: absolute;
z-index: 2;
}
.slbg img {
}

Answer 1

добавь картинке display: block; и будет margin: 0 auto; работать

<div class="sl">
  <div class="slbg"><img src="img/slbg.png"></div>
  <div class="slide"><img src="img/games/1.png"></div>
  <div class="slide"><img src="img/games/2.png"></div>
  <div class="slide"><img src="img/games/3.png"></div>
  <div class="slide"><img src="img/games/4.png"></div>
  <div class="slide"><img src="img/games/5.png"></div>
  <div class="slide"><img src="img/games/6.png"></div>
  <div class="slide"><img src="img/games/7.png"></div>
</div>

CSS

.sl{
  position: relative;
}
.slbg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}
.slide{
  position: relative;
  z-index: 1;
}

Answer 2

Конечно структура очень странная, но тем не менее кажется я понял что к чему. Как минимум нужно добавить общий контейнер. К тому же тут увидел br после div он не нужен, так как див и так блочный элемент, нужен отступ после дива - делай margin, а так ...

CSS

.sl {
  width: 750px;
  margin: 0 auto;
  border: 3px solid #fff;
  background-color: #fff;
  padding: 17px 0px;
}
.slide img {
  margin: 0 auto;
  z-index: 1;
}
.slbg {
  position: absolute;
  z-index: 2;
}
.slbg img {
}
// needly styles
.sl-container { position: relative; }
.sl {
  position: relative;
  z-index: 1;
}
.slbg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

HTML

<div class="sl-container">
  <div class="slbg">
    <img src="img/slbg.png">
  </div>
  <div class="sl">
      <div class="slide"><img src="img/games/1.png"></div>
      <div class="slide"><img src="img/games/2.png"></div>
      <div class="slide"><img src="img/games/3.png"></div>
      <div class="slide"><img src="img/games/4.png"></div>
      <div class="slide"><img src="img/games/5.png"></div>
      <div class="slide"><img src="img/games/6.png"></div>
      <div class="slide"><img src="img/games/7.png"></div>
  </div>
  <div class="button"><a href="#">Испытать удачу за 49 рублей</a></div>
</div>