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>