Как центрировать элементы во время действия при наведении на CSS - PullRequest
Новая
       0

Как центрировать элементы во время действия при наведении на CSS

2 голосов
/ 25 марта 2020

Итак, я изучаю CSS, и я все еще привыкаю к ​​возможности правильно расположить все элементы. Прямо сейчас у меня есть файлы HTML и CSS, которые dr aws, которые в основном похожи на робота Android. Для головы есть действие, которое, если вы наведите на него курсор, изменит ширину на 300 пикселей. Проблема в том, что глаза становятся нецентрированными. Как я могу центрировать глаза во время парения?

РЕДАКТИРОВАТЬ: Бонус вопрос; в части .eyes файла CSS мне было интересно, почему просто делать display: flex центрирует глаза. Я подумал, что мне нужно будет добавить align_items: center, чтобы центрировать его поперек оси, но только выполнение этого первого бита уже центрирует его. 

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;
}
<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 ]

3 голосов
/ 25 марта 2020

Просто попробуйте расположить глаза с полем, а не с позицией влево: 

.left_eye, .right_eye { 
    width: 20px; 
    height: 20px; 
    border-radius: 15px; 
    background-color: white;
    margin: 0 auto; <-- make horizontal margin automatically
}

Таким образом, он все равно будет центрирован, даже если вы измените ширину элемента.

2 голосов
/ 25 марта 2020

Вы можете просто добавить этот 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>
0 голосов
/ 25 марта 2020

Глаза относительно расположены. Попробуйте это, в конце вашего CSS: 

.head:hover .right_eye {
  left: 170px;
}

.head:hover .left_eye {
  left: 100px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...