css 为什么不能通过使用左0和右0将位置设置为绝对位置的元素居中

pu82cl6c 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(135)

我希望将联系人类中的所有项目居中

.contacts {
  width: 250px;
  height: 500px;
  margin-left: 37px;
  margin-top: 50px;
  position: relative;
  background-color: aqua;
}

.contact-card {
  position: absolute;
  left: 0;
  right: 0;
}

.contacts .contact-card img {
  width: 225px;
  height: 200px;
  object-fit: cover;
}

<div className="contacts">
  <div className="contact-card">
    <img src="https://dummyimage.com/600x400/357f94/00ff04" />
    <h3>Mr.Whiskerson</h3>
    <div className="info-group">
      <i className="fa-solid fa-phone"></i>
      <p>(212) 555-1234</p>
    </div>
    <div className="info-group">
      <i className="fa-solid fa-envelope"></i>
      <p>MrWhiskerson.meow</p>
    </div>
  </div>

</div>

当我设置为位置左0和右0时，没有任何变化，如何使用位置绝对值来完成此操作

css

来源：https://stackoverflow.com/questions/74885536/why-cannot-center-an-element-that-set-position-as-absolute-by-using-left-and-rig

1条答案

按热度按时间

js81xvg61#

只需使用Flexbox属性（或Grid）使元素居中即可。
我将把代码display:flex添加到主容器中，并设置justify-content: center;使其子容器水平居中（Justfy-content定义沿主轴的对齐方式）。

.contacts {
  width: 250px;
  height: 500px;
  margin-left: 37px;
  margin-top: 50px;
  position: relative;
  background-color: aqua;
  display:flex;/* add */
  justify-content:center; /* add */
}

.contact-card {
  /*position: absolute; remove
  left: 0;
  right: 0;*/
}


.contacts .contact-card img {
  width: 225px;
  height: 200px;
  object-fit: cover;
}

<div class="contacts">
  <div class="contact-card">
    <img src="https://dummyimage.com/600x400/357f94/00ff04" />
    <h3>Mr.Whiskerson</h3>
    <div class="info-group">
      <i class="fa-solid fa-phone"></i>
      <p>(212) 555-1234</p>
    </div>
    <div class="info-group">
      <i class="fa-solid fa-envelope"></i>
      <p>MrWhiskerson.meow</p>
    </div>
  </div>

</div>

如果您想使用position:absolute，可以这样做
一个二个一个一个

赞(0）回复(0）举报 2022-12-24

我来回答

css 为什么不能通过使用左0和右0将位置设置为绝对位置的元素居中

1条答案

相关问题

热门标签

最新问答