Как сделать оленей в центре

У меня есть код северного оленя, но он очень не по центру. Я сделал это по учебнику, но в учебнике это сработало отлично, но не на моем.

Это все код CCS для северного оленя.

  .reindeer {
    height: 510px;
    width: 350px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
    
      .face {
        background-color: #A98467;
        height: 150px;
        width: 100px;
        border-radius: 70px;
        position: relative;
        top: 200px;
        left: 320px;
      }
    
      .antler1, .antler2 {
        height: 25px;
        width: 96px;
        border-right: 10px solid #6C584C;
        border-top: 10px solid #6C584C;
        border-radius: 0 20px 0 0;
        z-index: -2;
        position: relative;
        bottom: 15px;
        right: 65px;
      }
    
      .a1, .a2, .a3 {
        background-color: #6C584C;
        height: 55px;
        width: 10px;
        border-radius: 10px;
        position: relative;
      }
    
      .a1 {
        bottom: 55px;
      }
    
      .a2 {
        bottom: 110px;
        left: 30px;
      }
    
      .a3 {
        bottom: 165px;
        left: 60px;
      }
    
      .antler2 {
        left: 65px;
        bottom: 40px;
        transform: rotateY(180deg);
      }
    
      .eye1, .eye2{
        background-color: #333333;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        position: relative;
      }
    
      .eye1 {
        bottom: 5px;
        left: 15px
      }
    
      .eye2 {
        bottom: 25px;
        left: 60px;
      }
    
      .eyeball {
        background-color: white;
        height: 8px;
        width: 8px;
        border-radius: 50%;
        position: relative;
        top: 5px;
        left: 5px;
      }
    
      .ear1, .ear2 {
        background-color: #95755E;
        height: 30px;
        width: 60px;
        border-radius: 0 0 30px 30px;
        position: relative;
        z-index: -1;
      }
    
      .ear1 {
        bottom: 75px;
        right: 23px;
        transform: rotate(-25deg);
      }
    
      .ear2 {
        bottom: 105px;
        left: 60px;
        transform: rotate(25deg);
      }
    
      .nose {
      background-color: #EE0000;
      height: 22px;
      width: 35px;
      border-radius: 50%;
      position: relative;
      bottom: 60px;
      left: 30px;
      }
    
      .nose2 {
        background-color: #F8453B;
        height: 9px;
        width: 15px;
        border-radius: 50%;
        position: relative;
        bottom: 78px;
        left: 43px;
      }
    
      .leg1, .leg2 {
        background-color: #6C584C;
        height: 100px;
        width: 20px;
        position: relative;
        border-radius: 0 0 8px 8px;
        z-index: -2;
      }
    
      .leg1 {
        left: 340px;
        top: 300px;
      }
    
      .leg2 {
        left: 380px;
        top: 200px;
      }
    
      .body {
        background-color: #95755E;
        height: 200px;
        width: 130px;
        border-radius: 100px;
        position: relative;
        bottom: 60px;
        left: 305px;
        z-index: -1;
      }

Я не уверен, как это сделало моего оленя так далеко от центра, я пытался изменить относительное абсолютное значение, но это не сработает. Кто-нибудь хочет мне помочь? Это школьный проект, и мне нужно сделать это очень быстро.

https://imgur.com/a/rNKdyut

<div class = "reindeer">
    <div class = "face">
        <div class = "antler1">
            <div class = "a1"></div>
            <div class = "a2"></div>
            <div class = "a3"></div>
        </div>
        <div class = "antler2">
            <div class = "a1"></div>
            <div class = "a2"></div>
            <div class = "a3"></div>
        </div>
        <div class = "eye1">
            <div class = "eyeball"></div>
        </div>
        <div class = "eye2">
            <div class = "eyeball"></div>
        </div>
        <div class = "ear1"></div>
        <div class = "ear2"></div>
        <div class = "nose"></div>
        <div class = "nose2"></div>
    </div>
    
    <div class = "leg1"></div>
    <div class = "leg2"></div>
    <div class = "body"></div>

</div>

Я кое-что узнал, но снова та же проблема с неполным центрированием. Я забыл добавить

   height: 510px;
    width: 350px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

в .raindeer И теперь он более центрирован, но я не знаю, как сделать его более центрированным.

Было бы полезно, если бы вы предоставили HTML-код, чтобы мы могли лучше понять проблему.

Gabriel Cunha 15.02.2023 12:29
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
1
54
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

    .header {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content:center
   }

  .reindeer {
    position: relative;
    

  }

  .face {
    background-color: #A98467;
    height: 150px;
    width: 100px;
    border-radius: 70px;
    position: relative;
    top: 200px;
    left: 320px;
  }

  .antler1, .antler2 {
    height: 25px;
    width: 96px;
    border-right: 10px solid #6C584C;
    border-top: 10px solid #6C584C;
    border-radius: 0 20px 0 0;
    z-index: -2;
    position: relative;
    bottom: 15px;
    right: 65px;
  }

  .a1, .a2, .a3 {
    background-color: #6C584C;
    height: 55px;
    width: 10px;
    border-radius: 10px;
    position: relative;
  }

  .a1 {
    bottom: 55px;
  }

  .a2 {
    bottom: 110px;
    left: 30px;
  }

  .a3 {
    bottom: 165px;
    left: 60px;
  }

  .antler2 {
    left: 65px;
    bottom: 40px;
    transform: rotateY(180deg);
  }

  .eye1, .eye2{
    background-color: #333333;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: relative;
  }

  .eye1 {
    bottom: 5px;
    left: 15px
  }

  .eye2 {
    bottom: 25px;
    left: 60px;
  }

  .eyeball {
    background-color: white;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    position: relative;
    top: 5px;
    left: 5px;
  }

  .ear1, .ear2 {
    background-color: #95755E;
    height: 30px;
    width: 60px;
    border-radius: 0 0 30px 30px;
    position: relative;
    z-index: -1;
  }

  .ear1 {
    bottom: 75px;
    right: 23px;
    transform: rotate(-25deg);
  }

  .ear2 {
    bottom: 105px;
    left: 60px;
    transform: rotate(25deg);
  }

  .nose {
  background-color: #EE0000;
  height: 22px;
  width: 35px;
  border-radius: 50%;
  position: relative;
  bottom: 60px;
  left: 30px;
  }

  .nose2 {
    background-color: #F8453B;
    height: 9px;
    width: 15px;
    border-radius: 50%;
    position: relative;
    bottom: 78px;
    left: 43px;
  }

  .leg1, .leg2 {
    background-color: #6C584C;
    height: 100px;
    width: 20px;
    position: relative;
    border-radius: 0 0 8px 8px;
    z-index: -2;
  }

  .leg1 {
    left: 340px;
    top: 300px;
  }

  .leg2 {
    left: 380px;
    top: 200px;
  }

  .body {
    background-color: #95755E;
    height: 200px;
    width: 130px;
    border-radius: 100px;
    position: relative;
    bottom: 60px;
    left: 305px;
    z-index: -1;
  }


    <div class = "header">
  <div class = "reindeer">
    <div class = "face">
        <div class = "antler1">
            <div class = "a1"></div>
            <div class = "a2"></div>
            <div class = "a3"></div>
        </div>
        <div class = "antler2">
            <div class = "a1"></div>
            <div class = "a2"></div>
            <div class = "a3"></div>
        </div>
        <div class = "eye1">
            <div class = "eyeball"></div>
        </div>
        <div class = "eye2">
            <div class = "eyeball"></div>
        </div>
        <div class = "ear1"></div>
        <div class = "ear2"></div>
        <div class = "nose"></div>
        <div class = "nose2"></div>
    </div>
    
    <div class = "leg1"></div>
    <div class = "leg2"></div>
    <div class = "body"></div>

</div>
</div>

обычно должен быть комментарием; но я вижу, что у вас нет необходимого представителя. пожалуйста, отредактируйте тот же ответ с решением после предоставления html~ :)

kevinnls 15.02.2023 12:30
Ответ принят как подходящий

Отличная работа над стилями для этого. Вместо того, чтобы пытаться центрировать северного оленя - самый простой подход - поместить северного оленя в div и центрировать его - я использую 100vw и 100vh, чтобы сделать контейнер на весь экран, а затем согнуть, чтобы выровнять его по вертикали и горизонтали центры.

ОБНОВЛЕНИЕ. Я также скорректировал ваши левые позиции различных элементов. Вы также можете сделать это с помощью flex, но чтобы это было максимально просто, я просто уменьшил левые значения, которые у вас есть.

Лучше всего просматривать это в полноэкранном фрагменте - и снова - чертовски хорошая работа над стилем - мне нравится то, что вы сделали :)

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content:center
 }
 
 .reindeer {
    position: relative;
  }

  .face {
    background-color: #A98467;
    height: 150px;
    width: 100px;
    border-radius: 70px;
    position: relative;
    top: 200px;
    left: 0;
  }

  .antler1, .antler2 {
    height: 25px;
    width: 96px;
    border-right: 10px solid #6C584C;
    border-top: 10px solid #6C584C;
    border-radius: 0 20px 0 0;
    z-index: -2;
    position: relative;
    bottom: 15px;
    right: 70px;
  }

  .a1, .a2, .a3 {
    background-color: #6C584C;
    height: 55px;
    width: 10px;
    border-radius: 10px;
    position: relative;
  }

  .a1 {
    bottom: 55px;
  }

  .a2 {
    bottom: 110px;
    left: 30px;
  }

  .a3 {
    bottom: 165px;
    left: 60px;
  }

  .antler2 {
    left: 65px;
    bottom: 50px;
    transform: rotateY(180deg);
  }

  .eye1, .eye2{
    background-color: #333333;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: relative;
  }

  .eye1 {
    bottom: 5px;
    left: 15px
  }

  .eye2 {
    bottom: 25px;
    left: 60px;
  }

  .eyeball {
    background-color: white;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    position: relative;
    top: 5px;
    left: 5px;
  }

  .ear1, .ear2 {
    background-color: #95755E;
    height: 30px;
    width: 60px;
    border-radius: 0 0 30px 30px;
    position: relative;
    z-index: -1;
  }

  .ear1 {
    bottom: 75px;
    right: 23px;
    transform: rotate(-25deg);
  }

  .ear2 {
    bottom: 105px;
    left: 60px;
    transform: rotate(25deg);
  }

  .nose {
  background-color: #EE0000;
  height: 22px;
  width: 35px;
  border-radius: 50%;
  position: relative;
  bottom: 60px;
  left: 30px;
  }

  .nose2 {
    background-color: #F8453B;
    height: 9px;
    width: 15px;
    border-radius: 50%;
    position: relative;
    bottom: 78px;
    left: 43px;
  }

  .leg1, .leg2 {
    background-color: #6C584C;
    height: 100px;
    width: 20px;
    position: relative;
    border-radius: 0 0 8px 8px;
    z-index: -2;
  }

  .leg1 {
    left: 15px;
    top: 300px;
  }

  .leg2 {
    left: 55px;
    top: 200px;
  }

  .body {
    background-color: #95755E;
    height: 200px;
    width: 130px;
    border-radius: 100px;
    position: relative;
    bottom: 60px;
    left: -15px;
    z-index: -1;
  }
<div class = "wrapper">
  <div class = "reindeer">
      <div class = "face">
          <div class = "antler1">
              <div class = "a1"></div>
              <div class = "a2"></div>
              <div class = "a3"></div>
          </div>
          <div class = "antler2">
              <div class = "a1"></div>
              <div class = "a2"></div>
              <div class = "a3"></div>
          </div>
          <div class = "eye1">
              <div class = "eyeball"></div>
          </div>
          <div class = "eye2">
              <div class = "eyeball"></div>
          </div>
          <div class = "ear1"></div>
          <div class = "ear2"></div>
          <div class = "nose"></div>
          <div class = "nose2"></div>
      </div>

      <div class = "leg1"></div>
      <div class = "leg2"></div>
      <div class = "body"></div>
  </div>
</div>

Все дело в том, что вы устанавливаете свойства left в своем CSS. Если вы уменьшите их, чтобы сместить биты северного оленя, чтобы просто занять reindeer div, вы можете установить ширину северного оленя на fit-content, а затем использовать margin: auto, чтобы расположить его в центре экрана.

Вот пара хороших видео Кевина Пауэлла о позиционировании здесь и здесь.

Объяснение того, как использовать поля для центрирования элементов, можно найти в CSS-трюках

Если вам нравятся такие вещи, попробуйте некоторые из задач в CSS Battle. Это действительно оттачивает ваши навыки.

Хороший северный олень кстати.

.pos {
  /*this is used to draw a centerline down the screen. Feel free to delete this*/
  position: fixed;
  width: 50%;
  height: 700px;
  border-right: 1px solid red;
}

.reindeer {
  /*position: relative; removed this */
  width: fit-content; /* added this */
  margin: auto;       /* added this */
}

.face {
  background-color: #a98467;
  height: 150px;
  width: 100px;
  border-radius: 70px;
  position: relative;
  top: 200px;
  left: 22px;  /* reduced this */
}

.antler1,
.antler2 {
  height: 25px;
  width: 96px;
  border-right: 10px solid #6c584c;
  border-top: 10px solid #6c584c;
  border-radius: 0 20px 0 0;
  z-index: -2;
  position: relative;
  bottom: 15px;
  right: 65px;
}

.a1,
.a2,
.a3 {
  background-color: #6c584c;
  height: 55px;
  width: 10px;
  border-radius: 10px;
  position: relative;
}

.a1 {
  bottom: 55px;
}

.a2 {
  bottom: 110px;
  left: 30px;
}

.a3 {
  bottom: 165px;
  left: 60px;
}

.antler2 {
  left: 65px;
  bottom: 40px;
  transform: rotateY(180deg);
}

.eye1,
.eye2 {
  background-color: #333333;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: relative;
}

.eye1 {
  bottom: 5px;
  left: 15px;
}

.eye2 {
  bottom: 25px;
  left: 60px;
}

.eyeball {
  background-color: white;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  position: relative;
  top: 5px;
  left: 5px;
}

.ear1,
.ear2 {
  background-color: #95755e;
  height: 30px;
  width: 60px;
  border-radius: 0 0 30px 30px;
  position: relative;
  z-index: -1;
}

.ear1 {
  bottom: 75px;
  right: 23px;
  transform: rotate(-25deg);
}

.ear2 {
  bottom: 105px;
  left: 60px;
  transform: rotate(25deg);
}

.nose {
  background-color: #ee0000;
  height: 22px;
  width: 35px;
  border-radius: 50%;
  position: relative;
  bottom: 60px;
  left: 30px;
}

.nose2 {
  background-color: #f8453b;
  height: 9px;
  width: 15px;
  border-radius: 50%;
  position: relative;
  bottom: 78px;
  left: 43px;
}

.leg1,
.leg2 {
  background-color: #6c584c;
  height: 100px;
  width: 20px;
  position: relative;
  border-radius: 0 0 8px 8px;
  z-index: -2;
}

.leg1 {
  left: 40px; /*reduced this */
  top: 300px;
}

.leg2 {
  left: 85px;  /*reduced this */
  top: 200px;
}


.body {
  background-color: #95755e;
  height: 200px;
  width: 130px;
  border-radius: 100px;
  position: relative;
  bottom: 60px;
  left: 5px; /* reduced this */
  z-index: -1;
}
<div class='pos'></div>
<div class = "reindeer">
    <div class = "face">
        <div class = "antler1">
            <div class = "a1"></div>
            <div class = "a2"></div>
            <div class = "a3"></div>
        </div>
        <div class = "antler2">
            <div class = "a1"></div>
            <div class = "a2"></div>
            <div class = "a3"></div>
        </div>
        <div class = "eye1">
            <div class = "eyeball"></div>
        </div>
        <div class = "eye2">
            <div class = "eyeball"></div>
        </div>
        <div class = "ear1"></div>
        <div class = "ear2"></div>
        <div class = "nose"></div>
        <div class = "nose2"></div>
    </div>
    
    <div class = "leg1"></div>
    <div class = "leg2"></div>
    <div class = "body"></div>

</div>

Другие вопросы по теме