弯曲对齐中心导致 br 后 a 不工作

Question

这个网格工作正常，除了当我将文本居中在右侧时，br 停止工作，所以 a 最终在它自己的行上......没有链接或中心，它可以正常工作。

我可以用该文本集合周围的 p 或div 包装器来解决这个问题，但也许是更好的方法？

对不起，无知。谢谢。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.right {
  background-color: lightgray;
  display: flex;
  align-items: center;
}
.left {
  background-color: darkgray;
}

<div class=container>
  <div class="left">
    left<br>left<br>left<br>left
  </div>
  <div class="right">
    <a href="http://www.google.com">google</a><br>right<br>right
  </div>
</div>
&nbsp;
<div class=container>
  <div class="left">
    left<br>left<br>left<br>left
  </div>
  <div class="right">
    google<br>right<br>right
  </div>
</div>

Answer 1

重写代码，使其看起来像这样，使用 <br> 不是分隔单独文本行的好方法

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.right {
  background-color: lightgray;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.left {
  background-color: darkgray;
}
/** This will remove the space between the p tags **/
p {
   margin: 0;
}

<div class=container>
  <div class="left">
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
  </div>
  <div class="right">
    <p><a href="http://www.google.com">google</a></p>
    <p>right</p>
    <p>right</p>
  </div>
</div>