所以我正在學習 CSS，并且仍然習慣能夠正確定位所有元素?，F在，我有一個 HTML 和 CSS 文件，它繪制了基本上看起來像 Android 機器人的東西。頭部有一個動作，如果你將鼠標懸停在它上面，它的寬度就會更改為 300px。問題是眼睛變得不集中。如何在懸停事件期間使眼睛居中？編輯：獎金問題；在 CSS 文件的 .eyes 部分中，我想知道為什么只將display: flex眼睛居中。我想我必須添加align_items: center它以使其在橫軸上居中，但只要做第一步就已經將其居中了。<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"><h1>Robot Friend</h1><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>
3 回答
繁華開滿天機
TA貢獻1816條經驗 獲得超4個贊
只需嘗試將您的眼睛定位在邊緣（而不是位置）左側：
.left_eye, .right_eye {
width: 20px;
height: 20px;
border-radius: 15px;
background-color: white;
margin: 0 auto; <-- make horizontal margin automatically
}
因此，即使您更改元素的寬度，它仍然會居中。
一只萌萌小番薯
TA貢獻1795條經驗 獲得超7個贊
您只需添加此 CSS 代碼即可。（根據需要調整寬度）
.eyes{
width:200px;
margin:0 auto;
}
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: 40px;
height: 125px;
border-radius: 100px;
}
.left_arm {
margin-right: 10px;
}
.right_arm {
margin-left: 10px;
}
.torso {
width: 200px;
height: 200px;
border-radius: 0 0 50px 50px;
}
.lower_body {
width: 200px;
height: 200px;
/* This is another useful property. Hmm what do you think it does?*/
margin: 0 auto;
display: flex;
justify-content: center;
}
.left_leg,
.right_leg {
width: 40px;
height: 120px;
border-radius: 0 0 100px 100px;
}
.left_leg {
margin-right: 30px;
}
.left_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.right_leg {
margin-left: 30px;
}
.right_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(340deg);
}
.left_eye,
.right_eye {
width: 20px;
height: 20px;
border-radius: 15px;
background-color: white;
}
.left_eye {
/* These properties are new and you haven't encountered
in this course. Check out CSS Tricks to see what it does! */
position: relative;
top: 100px;
left: 40px;
}
.right_eye {
position: relative;
top: 100px;
left: 120px;
}
.eyes{
width:200px;
margin:0 auto;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h1>Robot Friend</h1>
<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>
明月笑刀無情
TA貢獻1828條經驗 獲得超4個贊
眼睛的位置是相對的。在 CSS 末尾嘗試一下：
.head:hover .right_eye {
left: 170px;
}
.head:hover .left_eye {
left: 100px;
}
- 3 回答
- 0 關注
- 133 瀏覽
添加回答
舉報
0/150
提交
取消