Leave the CSS centralized

Question

Leave the CSS centralized

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I just made this code but it has a problem. How do I leave the img centralized? I'm trying to change by body but nothing happens. can anybody help me? Thanks!

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>

html5 css

asked by anonymous 24.05.2018 / 10:53

2 answers

Form validation error Problem creating minimax in chess game

score 1 · Answer 1

As you are using position:absolute at all I think the best way to do this alignment is to use margin:auto and left , top , right and bottom 0

See in the example below how it was.

#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>

score 0 · Answer 2

As you are using a width fixed, you can only make a left: 50% and adjust with margin-left: -315px (half of width of parent #back ):

See:

 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>