如何在 CSS 中的悬停操作期间使元素居中

Question

所以我正在学习 CSS，并且仍然习惯能够正确定位所有元素。现在，我有一个 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>

Answer 1

只需尝试将您的眼睛定位在边缘（而不是位置）左侧：.left_eye, .right_eye {&nbsp;&nbsp; &nbsp; width: 20px;&nbsp;&nbsp; &nbsp; height: 20px;&nbsp;&nbsp; &nbsp; border-radius: 15px;&nbsp;&nbsp; &nbsp; background-color: white;&nbsp; &nbsp; margin: 0 auto; <-- make horizontal margin automatically}&nbsp;因此，即使您更改元素的宽度，它仍然会居中。

Answer 2

您只需添加此 CSS 代码即可。（根据需要调整宽度）.eyes{width:200px;margin:0 auto;}h1 {&nbsp; text-align: center;&nbsp; font-family: 'Roboto', sans-serif;}.robots {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; justify-content: center;}.head,.left_arm,.torso,.right_arm,.left_leg,.right_leg {&nbsp; background-color: #5f93e8;}.head {&nbsp; width: 200px;&nbsp; margin: 0 auto;&nbsp; height: 150px;&nbsp; border-radius: 200px 200px 0 0;&nbsp; margin-bottom: 10px;}.eyes {&nbsp; display: flex;&nbsp; align-items: center;}.head:hover {&nbsp; width: 300px;}.upper_body {&nbsp; width: 300px;&nbsp; height: 150px;&nbsp; display: flex;}.left_arm,.right_arm {&nbsp; width: 40px;&nbsp; height: 125px;&nbsp; border-radius: 100px;}.left_arm {&nbsp; margin-right: 10px;}.right_arm {&nbsp; margin-left: 10px;}.torso {&nbsp; width: 200px;&nbsp; height: 200px;&nbsp; border-radius: 0 0 50px 50px;}.lower_body {&nbsp; width: 200px;&nbsp; height: 200px;&nbsp; /* This is another useful property. Hmm what do you think it does?*/&nbsp; margin: 0 auto;&nbsp; display: flex;&nbsp; justify-content: center;}.left_leg,.right_leg {&nbsp; width: 40px;&nbsp; height: 120px;&nbsp; border-radius: 0 0 100px 100px;}.left_leg {&nbsp; margin-right: 30px;}.left_leg:hover {&nbsp; -webkit-transform: rotate(20deg);&nbsp; -moz-transform: rotate(20deg);&nbsp; -o-transform: rotate(20deg);&nbsp; -ms-transform: rotate(20deg);&nbsp; transform: rotate(20deg);}.right_leg {&nbsp; margin-left: 30px;}.right_leg:hover {&nbsp; -webkit-transform: rotate(20deg);&nbsp; -moz-transform: rotate(20deg);&nbsp; -o-transform: rotate(20deg);&nbsp; -ms-transform: rotate(20deg);&nbsp; transform: rotate(340deg);}.left_eye,.right_eye {&nbsp; width: 20px;&nbsp; height: 20px;&nbsp; border-radius: 15px;&nbsp; background-color: white;}.left_eye {&nbsp; /* These properties are new and you haven't encountered&nbsp; &nbsp; in this course. Check out CSS Tricks to see what it does! */&nbsp; position: relative;&nbsp; top: 100px;&nbsp; left: 40px;}.right_eye {&nbsp; position: relative;&nbsp; top: 100px;&nbsp; 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">&nbsp; <div class="android">&nbsp; &nbsp; <div class="head">&nbsp; &nbsp; &nbsp; <div class="eyes">&nbsp; &nbsp; &nbsp; &nbsp; <div class="left_eye"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="right_eye"></div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="upper_body">&nbsp; &nbsp; &nbsp; <div class="left_arm"></div>&nbsp; &nbsp; &nbsp; <div class="torso"></div>&nbsp; &nbsp; &nbsp; <div class="right_arm"></div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="lower_body">&nbsp; &nbsp; &nbsp; <div class="left_leg"></div>&nbsp; &nbsp; &nbsp; <div class="right_leg"></div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 3

眼睛的位置是相对的。在 CSS 末尾尝试一下：.head:hover .right_eye {&nbsp; left: 170px;}.head:hover .left_eye {&nbsp; left: 100px;}