css 如何使驯鹿为中心

qnzebej0  于 2023-02-17  发布在  其他
关注(0)|答案(3)|浏览(101)

我有这个驯鹿代码，但它是非常偏离中心。我做了这个以下的教程，但在教程中它工作得很好，但不是对我的。
这是所有驯鹿的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;

在驯鹿里，现在它更居中了，但我不知道如何让它更居中。

css

3条答案

按热度按时间
jaql4c8m

jaql4c8m1#

非常好的风格工作。而不是试图使驯鹿中心-最简单的方法是把驯鹿在一个div和中心，我正在使用100 vw和100 vh使容器的全屏大小-然后弯曲，使其对齐垂直和水平中心。
更新-我还调整了不同元素的左边位置。你也可以用flex来做这个-但是为了尽可能的简单-我只是减少了你左边的值。
它的bbbest查看这在全屏片段-再一次-该死的罚款工作的造型-我喜欢你所做的：）

.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>
赞(0）分享  回复(0）举报  2023-02-17
rekjcdws

rekjcdws2#

.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>
赞(0）分享  回复(0）举报  2023-02-17
cl25kdpy

cl25kdpy3#

这一切都与你在CSS中设置left属性有关。如果你减少这些属性来移动驯鹿位以只占据reindeer div，你可以设置驯鹿宽度为fit-content，然后使用margin：auto将其定位在屏幕的中心。
下面是Kevin Powell关于here和here定位的两个很好的视频。
有关如何使用边距居中元素的解释，请参见CSS tricks
如果你喜欢这类游戏，那就试试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>
赞(0）分享  回复(0）举报  2023-02-17
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com