右对齐垂直居中的网格单元？

Question

我正在尝试在网格单元格中垂直居中对齐文本，但是

如果我使用'text-align：right'，它可以工作...（第一个示例）

如果我使用“ display：flex”和“ align-items：center”，则可以...（第二个示例）

如果我同时使用它们，“ text-align：right”会停止工作吗？ （第三示例）

请问如何正确对齐居中文本。

.container {
  display: grid;
  grid-template-columns: 150px auto;
}

.A {
  background-color: cyan;
  display: flex;
  align-items: center;
}

.B {
  background-color: cyan;
  text-align: right;
}

.C {
  background-color: cyan;
  display: flex;
  align-items: center;
  text-align: right;
}

.D {
  background-color: magenta;
}

<div class="container">
  <div class="A">
    Test.
  </div>
  <div class="D">
    <ul>
      <li>Test.</li>
      <li>Test.</li>
      <li>Test.</li>
    </ul>
  </div>
</div>
&nbsp;
<div class="container">
  <div class="B">
    Test.
  </div>
  <div class="D">
    <ul>
      <li>Test.</li>
      <li>Test.</li>
      <li>Test.</li>
    </ul>
  </div>
</div>
&nbsp;
<div class="container">
  <div class="C">
    Test.
  </div>
  <div class="D">
    <ul>
      <li>Test.</li>
      <li>Test.</li>
      <li>Test.</li>
    </ul>
  </div>
</div>

Answer 1

如果您需要设置align-items，则需要设置display: flex，以便在第一个示例中工作的原因；在第三个示例中，您不用flexbox，因此{{1} }不起作用＆align-items也不起作用，因为如果需要水平对齐文本，则需要将text-align: center与flexbox一起使用，如果需要垂直对齐，则需要justify-content使用flexbox，所以这是您的示例，具有正确的属性

align-items

Answer 2

justify-content: flex-end;是使居中文本右对齐

有关justify-content：here或here

的更多信息

.container {
  display: grid;
  grid-template-columns: 150px auto;
}

.A {
  background-color: cyan;
  display: flex;
  align-items: center;
}

.B {
  background-color: cyan;
  text-align: right;
}

.C {
  background-color: cyan;
  display: flex;
  align-items: center;
  text-align: right;
  justify-content: flex-end;
}

.D {
  background-color: magenta;
}

<div class="container">
  <div class="A">
    Test.
  </div>
  <div class="D">
    <ul>
      <li>Test.</li>
      <li>Test.</li>
      <li>Test.</li>
    </ul>
  </div>
</div>
&nbsp;
<div class="container">
  <div class="B">
    Test.
  </div>
  <div class="D">
    <ul>
      <li>Test.</li>
      <li>Test.</li>
      <li>Test.</li>
    </ul>
  </div>
</div>
&nbsp;
<div class="container">
  <div class="C">
    Test.
  </div>
  <div class="D">
    <ul>
      <li>Test.</li>
      <li>Test.</li>
      <li>Test.</li>
    </ul>
  </div>
</div>