CSS: 文本在水平和垂直居中时不换行

Question

我遇到了无法控制 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 中测试过。）

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

谢谢！

Answer 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>

Answer 2

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

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

CSS: 文本在水平和垂直居中时不换行

CSS: Text not wrapping when centered horizontally and vertically

css

word-wrap

centering