CSS：文本在水平和垂直居中时不换行答案

【问题标题】：CSS: Text not wrapping when centered horizontally and verticallyCSS：文本在水平和垂直居中时不换行
【发布时间】：2021-11-07 07:42:57
【问题描述】：

我有一种情况，我无法控制 HTML，但我可以添加 CSS。这是我要处理的标记块。

<div class="placard" id="placard3">
  <a href="https://optio.yln.info/login?url=https://connect.mangolanguages.com/yavapai/start" target="_blank" class="placard-link">
  <div class="row">
    <div class="col-xs-12"><img src="https://ppl.beta.yln.info/files/original/imagemango%20button.png" class="placard-image" alt="Mango Languages">
    <span class="placard-body">
      <p>Learn on Your Own Time at Home or On the Go</p>
    </span>
  </div>
</div>

这是我目前拥有的 CSS。

#placard3 {border:none; background-color:#acd373;border-radius:10px;}
#placard3 .col-xs-12 {text-align:center;}
.placard-body {color:#ff4022;align-items:center;display:inline-flex;min-height:80px;}

您可以在页面here 的更大上下文中看到这个块。绿色背景上的 Mango Languages 广告是我正在设计的样式。

我想要做的是使 Mango 图形右侧的文本在垂直和水平方向居中，并让文本保持在图形的右侧并随着浏览器宽度变窄而换行。

我已经尝试过 flex 和 grid 以及我可以在网络上找到的所有其他内容。居中很容易，但在所有这些中，当我将浏览器拖入时，文本都会跳到图形下方而不是换行。（我已经在最新的 Firefox 和 Edge 中对其进行了测试。）

请告诉我有一个解决方案。无法弄清楚如何做如此简单的事情令人沮丧。

谢谢！

【问题讨论】：

标签： css word-wrap centering

【解决方案1】：

这就是你要找的吗？ grid-template 完成了大部分工作。

#placard3 {
border:none; 
background-color:#acd373;
border-radius:10px;
}
#placard3 .col-xs-12 {
text-align:center;
display: grid; /* new */
grid-template: 1fr / auto 1fr; /* new */
}

.placard-image { /* new */
    margin: 2rem;
}

.placard-body {
color:#ff4022;
align-items:center;
display:inline-flex;
min-height:80px;
}

<div class="placard" id="placard3">
  <a href="https://optio.yln.info/login?url=https://connect.mangolanguages.com/yavapai/start" target="_blank" class="placard-link">
  <div class="row">
    <div class="col-xs-12">
        <img src="https://ppl.beta.yln.info/files/original/imagemango%20button.png" class="placard-image" alt="Mango Languages">
        <span class="placard-body">
            <p>Learn on Your Own Time at Home or On the Go</p>
        </span>
  </div>
</div>

【讨论】：

谢谢！该解决方案确实有效，但我决定使用下面的解决方案，因为它更简洁。

【解决方案2】：

通过在 .col-xs-12 div 上使用 flex 并在 .placard-body 上使用 auto 边距，您可以获得您正在寻找的行为：

#placard3 .col-xs-12 {
  display: flex;
  flex-wrap: none;
  align-items: center;
}
.placard-body {
  color:#ff4022;
  margin: auto;
}

【讨论】：

你拯救了我的理智！谢谢！这解决了问题。