我正在学习 CSS 并练习我的定位技巧,我需要对齐在 CSS 中创建的实体。它基本上是android机器人。问题是我不确定我是否完全对齐了某些元素。例如,我想确保头部左侧和左眼之间的距离与头部右侧和右眼之间的距离相同。我怎样才能确定?
这是 html 和 css 代码的链接。
https://codepen.io/crismanrique/pen/QWbZxdQ
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.robots {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.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 {
display: flex;
align-items: center;
}
.head:hover {
width: 300px;
}
.upper_body {
width: 300px;
height: 150px;
display: flex;
}
.left_arm,
.right_arm {
width: …Run Code Online (Sandbox Code Playgroud)