pomoc Centrovanie obrázka a z-index

[Invouk 91]

Zdravím: mám problém v CSS: 

CSS:

.logo
{
    display: block;
    margin: 0 auto;
}

toto dáva obrázok do stredu no a potrebujem aby bol obrázok za a jeden onrázok pred tým prvým, a aby bol v strede tak som skúšal toto:
 

 .logo{
    position: absolute;
    z-index: 3500;
    display: block;
    margin: 0 auto;
}

Ale toto mi dá preč vycentrovanie obrázka a dá pred, pomôžete ako na to ?

[Fakerko_ 190]

<div class="image-wrapper">

    <div class="sq1"></div>

    <div class="sq2"></div>

  </div>

.image-wrapper{

      position: relative;

      width: 200px;

      height: 200px;

    }

    .sq1{

      position: absolute;

      z-index: 1;

      width: 100%;

      height: 100%;

      background: #333;

    }

    .sq2{

      position: absolute;

      z-index: 2;

      width: 100%;

      height: 100%;

      background: #999;

    }

[Invouk 91]

ktorý je teraz ten vycentrovaný sq1 alebo sq2 ?

[Fakerko_ 190]

Vycentruješ celý wrapper

[Invouk 91]

CSS

.image-wrapper{
      width: 100%;
      position: relative;
      margin: 0 auto;
    }
    .lg{
      position: absolute;
      z-index: 200;
    }
    .bg-lg{
      position: absolute;
      z-index: 100;
      height: 500px;
    }

HTML:

<div class="image-wrapper">
 <div class="lg"><img src="./img/Batman_Logo.jpeg" alt="Logo" style="width: 30%; height: 20%;"></img></div>
 <div class="bg-lg"> <img src="./img/bg.png" alt="bg-logo"></img></div>
</div>

a robí mi to, hocijako ani neroztiahne ten bg do maxima, a ani nevycentruje, a dá to pred text... čož nechcem.

Edited 17. Únor, 2017 by eXpresS

[Huzy 11]

Trochu nechápu, co chceš. Můžeš mi to nakreslit? Hodím ti sem pak kompletní css. 

[Invouk 91]

Tento obrázok čo je v krúžku (batman logo) potrebujem vycentrovať.

[Huzy 11]

http://codepen.io/Huzy666/pen/oBrxEm Tady to máš Nahraď obrázky za background-color a je to A uprav si velikosti.

 

Jo, u wrapperu nastav bg-color: transparent; nebo smaž bg-color  

Edited 19. Únor, 2017 by Huzy

[Fakerko_ 190]

http://codepen.io/Huzy666/pen/oBrxEm Tady to máš Nahraď obrázky za background-color a je to A uprav si velikosti.

 

Pokud někdo půjde přes mobil, tak tam bude zbytečně velká mezera mezi horní hranou a obrázkem.

 

Místo translate bych udělal display: table; a display: table-cell;

[Huzy 11]

Pokud někdo půjde přes mobil, tak tam bude zbytečně velká mezera mezi horní hranou a obrázkem.

 

Místo translate bych udělal display: table; a display: table-cell;

To slyším po prvně, abych se přiznal Někdy to vyzkouším.

[Fakerko_ 190]

To slyším po prvně, abych se přiznal Někdy to vyzkouším.

Když to zobrazíš jako tabulku, tak můžeš použít vertical-align: middle;

[Invouk 91]

Pridal som tam obrázok aby pulzoval:

 

.pulse {
  animation: pulse 7s infinite;
  display: table;
  margin-top: 50px;
  animation-direction: alternate;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

Zistil som, že toto mi dáva na stranu ten obrázok. Vycentrované bez pulse som to mal.
Ale ako tam dám toto tak to posune tak o 20% do pravej strany.

Edited 21. Únor, 2017 by eXpresS