时间戳

首页 > 解决方案 > CSS：文本在水平和垂直居中时不换行

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

问题描述

我有一种情况，我无法控制 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;}

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

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

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

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

谢谢！

标签： cssword-wrapcentering

解决方案

这是你想要的？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>

推荐阅读