Question 276358 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I center the legs of my robot on the body?

Anyone who can check out my code and indicate me why the legs of the robot are not in the center? I would like to place the robots’ legs in the middle of his body – cannot seem to get them centralized.

body {
  background-color: grey;
}

h1 {
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.robots {}

.head,
.left_arm,
.torso,
.right_arm,
.left_leg,
.right_leg {
  background-color: #5f93e8;
}

.head {
  width: 200px;
  margin: 0 auto;
  height: 150px;
  border-radius: 200px 200px 0 0;
  margin-bottom: 10px;
}

.eyes {}

.head:hover {
  width: 300px;
  transition: 1s ease-in-out;
}

.upper_body {
  width: 300px;
  height: 150px;
  display: flex;
}

.left_arm,
.right_arm {
  width: 40px;
  height: 125px;
  border-radius: 100px;
}

.left_arm {
  margin-right: 10px;
}

.left_arm:hover {
  width: 25px;
  transform: rotate(20deg);
}

.right_arm:hover {
  width: 25px;
  transform: rotate(-20deg);
}

.right_arm {
  margin-left: 10px;
}

.torso {
  width: 200px;
  height: 200px;
  border-radius: 0 0 50px 50px;
}

.lower_body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 130px;
  margin: 30px auto 0px;
}

.left_leg,
.right_leg {
  width: 40px;
  height: 120px;
  border-radius: 0 0 100px 100px;
}

.left_leg {
  margin-left: 45px;
}

.left_leg:hover {
  transform: rotate(20deg);
}

.right_leg {
  margin-left: 30px;
}

.right_leg:hover {
  transform: rotate(-20deg);
}

.left_eye,
.right_eye {
  width: 20px;
  height: 20px;
  border-radius: 15px;
  background-color: white;
}

.left_eye {
  position: relative;
  top: 100px;
  left: 40px;
}

.right_eye {
  position: relative;
  top: 100px;
  left: 120px;
}
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <h1>Robot Friend</h1>
  <div class="container">
    <div class="robots">
      <div class="android">
        <div class="head">
          <div class="eyes">
            <div class="left_eye"></div>
            <div class="right_eye"></div>
          </div>
        </div>
        <div class="upper_body">
          <div class="left_arm"></div>
          <div class="torso"></div>
          <div class="right_arm"></div>
        </div>
        <div class="lower_body">
          <div class="left_leg"></div>
          <div class="right_leg"></div>
        </div>
      </div>
    </div>
  </div>
</body>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Adjusted :

    .left_leg { margin-left: 45px; }


  2. 0

    Remove the left margin from here:

    .left_leg {
  margin-left: 45px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search