Pozycjonowanie w CSS

0

Witam!
Próbuję wyśrodkować obiekt o klasie background (granatowe kółko) wewnątrz czerwonego kwadratu, (klasa ilustration)ale text align oraz margin auto nie działa (jedynie wpisywanie ręczne, ale ono i tak zależy od wielkości strony, więc na ekranie o innej rozdzielczości nie da się wypośrodkować.

Potrafiłby ktoś wyjaśnić dlaczego tak się dzieje i czym to środkować?)


.tags{
  width: 60%;
  height: 500px;
  float: right;
  background-color: green ;
  position: relative;

}
.ilustration{
  width: 40%;
  height: 500px;
  float: left;
  background-color: red ;
  position: relative;

}

.background{
  transform: scale(0.6);
  width:650px;
  height: 650px;
  background-color: #000c1a;;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.first, .second, .third, .forth, .fifth, .sixth{
  opacity: 0;
  transition: 0.5s;
  color: #212326;
  text-align: center;
  font-family: "Comic Sans MS";
  font-size: 25px;
}
.fifth, .sixth{
    font-size: 40px;
    color:black;
    font-weight: bold;
}


.bounceInMYV {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
    opacity: 1;
}
.rotateInUpLeftMYV {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  opacity: 1;
}
.rotateInUpRightMYV {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  opacity: 1;

}
.bounceInUpMYV {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
    opacity: 1;
}
.pulseMYV {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: pulse;
  animation-name: pulse;
  opacity: 1;
}
.HeartBeatMYV {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  opacity: 1;
}
.image{
  position: relative;
  left:25px;
  top:0;
  transform: rotate(180deg) scale(0.7);


}
.bag{
  animation-iteration-count:infinite;
  animation-name: float;
  animation-duration: 4s;
  position: relative;
  top: 0;
}
.jellyfish_left{
  position: absolute;
  height: 800px;
  background-color: #000c1a;
  width:325px;
  overflow: hidden;
  top:0px;
}
.jellyfish_right{
  position: absolute;
  width:325px;
  height: 800px;
  background-color: #000c1a;
  left:325px;
  overflow: hidden;
  transition: 0.7s;
  top:0;

}
.JR-animate{
  width:0px;
}
.head_up_right{
  border-bottom: 65px solid white;
  border-left: 0px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 62.5px;
  border-top-right-radius: 200px;
  position: relative;

  animation-iteration-count:infinite;
  animation-name: HeadRighttUp;
  animation-duration: 4s;
  opacity: 0.8;
}
.head_up_left{
  border-bottom: 65px solid white;
  border-left: 25px solid transparent;
  border-right: 0 solid transparent;
  height: 0;
  width: 62.5px;
  border-top-left-radius: 200px;
  position: relative;
  opacity: 0.8



}
.headR{
  transform: scale(1);
  animation-iteration-count:infinite;
  animation-name: HeadRightUp;
  animation-duration: 4s;
  position: relative;
  height:105px;
  width: 125px;
  top:150px;
}
.headL{
  transform: scale(1);
  animation-iteration-count:infinite;
  animation-name: HeadRightUp;
  animation-duration: 4s;
  position: relative;
  height:105px;
  width: 125px;
  top:150px;
  right: -237.5px;
}


.head_down_right{
  border-top: 40px solid white;
  border-left: 0px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 62.5px;
  border-bottom-right-radius: 200px;
  position: relative;
  transition: 0.7s;


}
.head_down_left{
  border-top: 40px solid white;
  border-left: 25px solid transparent;
  border-right: 0px solid transparent;
  height: 0;
  width: 62.5px;
  border-bottom-left-radius: 200px;
  position: relative;
  transition: 0.7s;


}
.up, .middle, .middle2, .up2{
width: 7.5px;
height: 120px;
background-color: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
transform: rotate(0deg);
position: relative;
}

.up {
   right: -287.5px;
   float: left;
   top:180px;
   transform: rotate(0);
   animation-iteration-count:infinite;
   animation-name: rotation;
   animation-duration: 4s;
}
.middle{
  right: -280px;
  top: 320px;
  float: left;
  animation-iteration-count:infinite;
  animation-name: rotationm;
  animation-duration: 4s;
}
.leg2{
  position: relative;
  top: 20px;
}

.up2{
  left: 15px;
  float: left;
  top:180px;
  animation-iteration-count:infinite;
  animation-name: rotation2;
  animation-duration: 4s;
}
.middle2{
  left:7.5px;
  top: 320px;
  float: left;
  animation-iteration-count:infinite;
  animation-name: rotationm2;
  animation-duration: 4s;
}
.leg3{
  position: relative;
  top: 20px;
}
@keyframes HeadRightUp{
  0%   { transform: scaleY(1) scaleX(1); top:150px; }
  50%  { transform: scaleY(0.7) scaleX(1.2); top:70px;}
  100% { transform: scaleY(1) scaleX(1); top:150px;}
}
@keyframes rotation {
  0%   { transform: rotate(0deg); right: -287.5px; top: 180px;}
  50% { transform: rotate(30deg);right: -217.5px; top: 90px;}
  100% { transform: rotate(0deg);right: -287.5px; top: 180px;}
}

@keyframes rotation2 {
  0%   { transform: rotate(0deg); left: 15px; top: 180px;}
  50% { transform: rotate(-30deg); left: 85px; top: 90px;}
  100% { transform: rotate(0deg); left: 15px; top: 180px;}
}

@keyframes rotationm{
  0%   { transform: rotate(0deg); right: -280px; top: 320px;}
  50% { transform: rotate(-17deg);right: -205px; top: 240px;}
  100% { transform: rotate(0deg);right: -280px; top: 320px;}
}
@keyframes rotationm2{
  0%   { transform: rotate(0deg); left: 7.5px; top: 320px;}
  50% { transform: rotate(17deg); left: 82.5px; top: 240px;}
  100% { transform: rotate(0deg); left: 7.5px; top: 320px;}
}
@keyframes float {
  0% { top:0px;}
  50% {top: -40px;}
  100%{top:0px;}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>jellyfish</title>
    <meta charset="utf-8">
    <link   rel="stylesheet" href="style.css" >
    <link   rel="stylesheet" href="animate.css" >
  </head>
  <body>
<div class="ilustration">
    <div class="background">
     <div class="bag"> <img src="images\plastic bag.png" class="image"></img></div>
    <div class="jellyfish_left">
      <div class="headL">
      <div class="head_up_left"></div>
      <div class="head_down_left" id="head_down_left"></div>
    </div>
      <div class= "leg1">
        <div class= "up"></div>
         <div class="middle"> </div>
      </div>
      <div class= "leg2">
        <div class= "up"></div>
        <div class="middle"> </div>
      </div>
    </div>
    <div class="jellyfish_right" id="jellyfish_right">
      <div class="headR">
      <div class="head_up_right"></div>
      <div class="head_down_right"></div>
    </div>
      <div class= "leg3">
        <div class= "up2"></div>
        <div class="middle2"></div>
      </div>
      <div class= "leg4">
        <div class= "up2"></div>
        <div class="middle2"></div>
       </div>
    </div>
  </div>
  </div>
  <div class="tags">

</div>
  <div class="space"></div>
    <div class="space"></div>


  
</body>
</html>


1

Łatwiej ci będzie pewnie wyśrodkować używając flexa niż bawić się we floaty
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

a poza tym to zrób jakiś najmniejszy reprodukowalny case i wstaw na jakieś codepen.io albo coś.

0

Flex, albo jakiego grida zastosuj, szkoda czasu na walkę z css, bo to najmniejszy problem.

0

Wygląda na to, że obiekt potraktowany transform-scale nie do końca zachowuje się tak, jakby miał tyle px ile mu wychodzi po przeskalowaniu. Miałam niedawno podobny problem, próbując czytać współrzędne kliknięć myszy na przeskalowanym obiekcie. JS podawał mi jakieś kosmiczne wartości spoza ekranu.

Trochę pomoże, jak centrowanemu .background dasz margin:auto i zdejmiesz z niego transform:scale, a robaka wrzucisz w kolenego Diva, któremu dopiero przypiszesz transformację. Ale jak chcesz w pionie i w poziomie, to najlepiej użyć centrowania oferowanego przez display:float.

1 użytkowników online, w tym zalogowanych: 0, gości: 1