Leave the CSS centralized

Asked

Viewed 52 times

0

I just made this code but there’s a problem. How do I get the img centered? I’m trying to change my body, but nothing happens. Can someone help me? Thank you!

body {
  margin: 0;
  padding: 0;
}

#back {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #C52C27;
  width: 630px;
  height: 630px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#circle {
  width: 380px;
  height: 380px;
  background-color: white;
  border-radius: 50%;
  border: 20px solid #FED106;
}

#triangle1 {
  position: absolute;
  left: 230px;
  top: 45px;
  width: 300px;
  height: 240px;
  background-color: #FED106;
  clip-path: polygon(100% 0%, 0% 100%, 35% 100%);
}

#middle {
  position: absolute;
  left: 150px;
  top: 220px;
  width: 310px;
  height: 240px;
  background-color: #FED106;
  clip-path: polygon(70% 0, 100% 0, 40% 75%, 15% 75%);
}

#triangle2 {
  position: absolute;
  left: 120px;
  top: 335px;
  width: 300px;
  height: 240px;
  background-color: #FED106;
  clip-path: polygon(65% 0, 0 100%, 100% 0);
}
<div id="back">
  <div id="circle"></div>
  <div id="triangle1"></div>
  <div id="middle"></div>
  <div id="triangle2"></div>
</div>

css html5

2 answers

1

Like you’re wearing it position:absolute in everything to my mind the best way to make this alignment is using margin:auto and left, top, right and bottom 0

See in the example below how it looked.

#back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #C52C27;
    width: 630px;
    height: 630px;

}
#circle {
    width: 380px;
    height: 380px;
    background-color: white;
    border-radius: 50%;
    border: 20px solid #FED106;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
#triangle1 {
    position: absolute;
    left: 230px;
    top: 45px;
    width: 300px;
    height: 240px;
    background-color: #FED106;
    clip-path: polygon(100% 0%, 0%
        100%, 35% 100%);
}
#middle{
    position: absolute;
    left: 150px;
    top: 220px;
    width: 310px;
    height: 240px;
    background-color: #FED106;
    clip-path: polygon(70% 0, 100% 0, 40% 75%, 15% 75%);
}
#triangle2{
    position: absolute;
    left: 120px;
    top: 335px;
    width: 300px;
    height: 240px;
    background-color: #FED106;
    clip-path: polygon(65% 0, 0 100%, 100% 0);

}
<div id="back">
    <div id="circle"></div>
    <div id="triangle1"></div>
    <div id="middle"></div>
    <div id="triangle2"></div>
</div>

0

How are you wearing one width fixed, you can just make a left: 50% and adjust with margin-left: -315px (half of width of the div-mother #back):

Behold:

 body {
     margin: 0;
     padding: 0;
 }
 #back {
     position: absolute;
     top: 0;
     left: 50%;
     margin-left: -315px;
     background-color: #C52C27;
     width: 630px;
     height: 630px;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 #circle {
     width: 380px;
     height: 380px;
     background-color: white;
     border-radius: 50%;
     border: 20px solid #FED106;
 }
 #triangle1 {
     position: absolute;
     left: 230px;
     top: 45px;
     width: 300px;
     height: 240px;
     background-color: #FED106;
     clip-path: polygon(100% 0%, 0%
         100%, 35% 100%);
 }
 #middle{
     position: absolute;
     left: 150px;
     top: 220px;
     width: 310px;
     height: 240px;
     background-color: #FED106;
     clip-path: polygon(70% 0, 100% 0, 40% 75%, 15% 75%);
 }
 #triangle2{
     position: absolute;
     left: 120px;
     top: 335px;
     width: 300px;
     height: 240px;
     background-color: #FED106;
     clip-path: polygon(65% 0, 0 100%, 100% 0);

 }
<div id="back">
   <div id="circle"></div>
   <div id="triangle1"></div>
   <div id="middle"></div>
   <div id="triangle2"></div>
</div>

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.