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

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

Это все код 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-код, чтобы мы могли лучше понять проблему.

— 15.02.2023 12:29

html css

15.02.2023 12:20

CSS Flex: что должен знать каждый разработчик

CSS Flex: что должен знать каждый разработчик Модуль flexbox, также известный как гибкий модуль разметки box, помогает эффективно проектировать и...

Введение в раздел "Заголовок" в HTML

Говорят, что лучшее о человеке можно увидеть только изнутри, и это относится и к веб-страницам HTML! Причина, по которой некоторые веб-страницы не...

Как React Helmet спасает меня при разделении файлов CSS?

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

Селекторы CSS - Селекторы классов

Селекторы классов CSS - это селектор CSS, используемый для применения стиля к определенному элементу. Селекторы классов определяются путем добавления...

Руководство для начинающих по веб-разработке: HTML, CSS и JavaScript.

Добро пожаловать, мои коллеги по интернету, в захватывающий мир веб-разработки! Дорогие мои начинающие, я здесь, чтобы провести вас через основы HTML,...

Mastering CSS : Введение в каскадные таблицы стилей

CSS - это язык, используемый для стилизации веб-страниц. Он определяет, как должны отображаться элементы HTML, например, их цвета, шрифты, интервалы и...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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~ :)

— 15.02.2023 12:30

15.02.2023 12:25

Ответ принят как подходящий

Отличная работа над стилями для этого. Вместо того, чтобы пытаться центрировать северного оленя - самый простой подход - поместить северного оленя в 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>

15.02.2023 12:35

Все дело в том, что вы устанавливаете свойства 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>

15.02.2023 12:49

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

Почему тень работает на входе, но не на элементах div?

HTML - JS - несколько кнопок, которые меняют css столбцов таблицы

Изменение изображения с помощью переключателя

CSS/JS. Как убедиться, что строка разорвется, чтобы можно было изменить стиль?

Как отобразить содержимое элементов в раскрывающемся списке в меню активной вкладки?

Запуск привязки прокрутки CSS для чего-то другого, кроме прокрутки

Почему этот javascript работает только в теге script, а не в файле .js?

Расширить панель поиска одинаково с обеих сторон

Как даже строки будут сдвинуты при использовании фонового изображения

Как изменить мой CSS, чтобы высота текстовой области всегда соответствовала высоте его контейнера div?

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

Ответы 3

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

Похожие вопросы