时间戳

首页 > 解决方案 > 如何将元素相对于其他元素居中，但所有元素都适合使用 CSS 的祖先？

css - 如何将元素相对于其他元素居中，但所有元素都适合使用 CSS 的祖先？

问题描述

我看到了如何使用绝对定位将元素置于其父元素下方的中心，如下面的代码片段示例所示。

但是我如何“轻推”这样一个元素以使其适合任意祖先容器？它应该尽可能靠近其父元素的中心，但它不能“泄漏”到祖先容器元素之外。有没有办法使用绝对定位来做到这一点，或者可能是其他一些技术，而不知道像素的数量（例如left: -10px;，p1 和right: -20pxp3 都没有）......也就是说，无论 p1/ p2/p3 元素恰好在容器内结束。

div { border: 1px solid grey; }
.container {  text-align: center; }

.p1, .p2, .p3 {
  width: 100px;
  margin-bottom: 100px;
  position: relative;
  background-color: lightgreen;
  margin-inline: auto;
}  
.p1 {
  margin-left: 10px; /* could be anything*/
}
.p2 {}
.p3 {
  margin-right: 20px; /* could be anything*/
}
.message {
  width: 200px;
  background-color: lightyellow;
  text-align: center;
  
  /* naive attempt: centered under parent */
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
<div class="container">
  ancestor container
  <div class=" p1">
    p1
    <div class="message">I want this centered under p1 but nudged right to ensure it fits in container</div>
  </div>
  <div class="p2">
    p2
    <div class="message">I want this centered under p2</div>
  </div>
  <div class="p3">
    p3
    <div class="message">I want this centered under p3 but nudged left to ensure it fits in container</div>
  </div>
</div>

标签： css

解决方案

您能否发布一个 jsfiddle 以便我们更新您的代码？

否则尝试像这样添加额外的类：

<div class="message message1">

然后在css中

.message.message1  {
  left: 0;
}

推荐阅读