Pozycjonowanie w CSS

Odpowiedz Nowy wątek
2019-05-22 17:27

Rejestracja: 1 rok temu

Ostatnio: 11 miesięcy temu

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>
illustration przez dwa l powinno być, ale to tak na marginesie. - LukeJL 2019-05-22 19:07

Pozostało 580 znaków

2019-05-22 19:09

Rejestracja: 6 lat temu

Ostatnio: 58 minut temu

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ś.


((0b10*0b11*(0b10**0b101-0b10)**0b10+0b110)**0b10+(100-1)**0b10+0x10-1).toString(0b10**0b101+0b100);
edytowany 1x, ostatnio: LukeJL, 2019-05-22 19:10

Pozostało 580 znaków

2019-05-22 20:32

Rejestracja: 5 lat temu

Ostatnio: 1 godzina temu

Lokalizacja: Piwnica

0

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


Pozostało 580 znaków

2019-05-22 20:35

Rejestracja: 2 lata temu

Ostatnio: 55 minut temu

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.


Pozostało 580 znaków

Odpowiedz

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