CSS：如何在对齐其兄弟的同时将元素相对于其父元素居中？

Question

我已经草拟了我想做的事情：

我正在使用Bootstrap列表组。在最上面的li中，我在h4元素中有一些文本，在span元素中有一个字形。我想将h4相对于其父li的中心（即不考虑span，沿着草图中的A），并将span右对齐与h4相同的高度（在草图中沿着B）。

我已经找到了可能的解决方案，但我似乎无法找到适合我特定情况的解决方案。这些元素要么不是水平对齐，要么h4仅在其自身内居中（即考虑span）。

这是一个小提琴：https://jsfiddle.net/j3vdvtxj/1/

Answer 1

你很可能会做这样的事情：

ul.list {
  width:100%;
  margin:0;
  padding:0;
  list-style-type:none;
 }
ul.list li {
  width:100%;
  padding:20px 0;
  background:yellow;
  margin-bottom:10px;
  }
ul.list h4 {
  text-align:center;
  }
ul.list span {
  float:right;
  }

<ul class="list">
  <li>
    <span>right align me</span>
    <h4>title goes here</h4>
  </li>
  <li>
    <span>right align me</span>
    <h4>title goes here</h4>
  </li>
  <li>
    <span>right align me</span>
    <h4>title goes here</h4>
  </li>
  <li>
    <span>right align me</span>
    <h4>title goes here</h4>
  </li>
</ul>

Answer 2

您可以使用相对和绝对位置和transform: translate(-50%, -50%)垂直和水平居中，同时将text-right类添加到第一个{{1将跨度拉到右侧。

＆＃13;

＆＃13;

li

＆＃13;

li:first-child {
  position: relative;
}

li:first-child p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用以下代码。

通过这种方式，您不必关心HTML标签的顺序，您也可以将文本置于y轴中心。

＆＃13;

＆＃13;

li:first-child {
  position: relative; /* First you create a reference for your h4 absolute item. */
  text-align: right; /* And you put the span to right. */
}
li:first-child span,
li:first-child h4 {
    text-align: left; /* You align content as you want. */
}
li:first-child h4 {
    /* And you X/Y center the h4 content with the `li` relavive reference. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* The CSS below is not a part of the answer but help the result to be more nice. */
ul {
  width:100%; 
  list-style-type:none;
  margin: 0;
  padding: 0;
}
li {
  border: 1px solid #ccc;
}
li span {
   display: inline-block;
   padding: 20px;
   border-left: 1px solid #ccc;
}
li h4 {
    margin: 0;
}

＆＃13;

<ul>
  <li>
    <h4>A AAA AA AAA AA A AAAAA A </h4>
    <span>B</span>
  </li>
  <li>
    <h4>A AAA AA AAAAAA<br>AA A AAAAA<br>A AAA AA AAAAAA</h4>
  </li>
  <li>
    <h4>A AAA AAAAA</h4>
  </li>
  <li>
    <h4>A AAA AA<br>AA A AAAAA</h4>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

如果您只想在x轴上居中，请只使用left: 50%和transform: translateX(-50%)。