Question

我有一个问题，我试图将底部p标签相对于顶部p标签的中心放置。如果我要使用相对位置并使用calc到50％，它将相对于其父元素将此底部p标签居中。我该如何相对于上面的子p标签制作第二个子p标签以将其居中并粘贴在其顶部兄弟姐妹的正下方？

这是我正在尝试做的一个例子。

#parent{
  display: inline-block;
  width: fit-content;
}
#child-1{
  background: blue;
}
#child-2{
  background: red;
  width: fit-content;
  }

<ul>
  <li id = "parent">
    <p id = "child-1"> Child to be made into parent </p>
    <p id = "child-2"> centered sibling </p>
  </li>
</ul>

Answer 1

一种方法是使用flexbox，就像这样。这与第一个p标签无关，而与父标签本身有关。但这看起来像是在中心。

#parent {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

#parent p {
  margin: 0;
}

#child-1 {
  background: blue;
}

#child-2 {
  background: red;
}

<ul>
  <li id="parent">
    <p id="child-1"> Child to be made into parent </p>
    <p id="child-2"> centered sibling </p>
  </li>
</ul>

Answer 2

您无需使用Flexbox即可轻松完成此操作。如您所见，您几乎不错。通过使用width:fit-content，您只是在寻找inline-block。

#parent {
  display: inline-block;
  text-align: center;
}

#parent>p {
 margin:0;
}

#child-1 {
  background: blue;
}

#child-2 {
  background: red;
  display:inline-block;
}

<ul>
  <li id="parent">
    <p id="child-1"> Child to be made into parent </p>
    <p id="child-2"> centered sibling </p>
  </li>
</ul>

如何在jsx中将<p>标记设为另一个</p> <p>标记的父代？

2 个答案: