CSS: Text not wrapping when centered horizontally and vertically

Question

I have a situation where I have no control over the HTML but I can add CSS. Here's the chunk of markup I'm trying to wrangle.

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

This is the CSS I have at the moment.

#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;}

You can see this chunk in the larger context of the page here. The Mango Languages ad on the green background is what I'm styling.

What I want to do is to make the text to the right of the Mango graphic centered both vertically and horizontally, AND have the text stay to the right of the graphic and wrap as the browser width is narrowed.

I have tried flex and grid and everything else I can find on the web. The centering is easy enough, but in all of them the text jumps below the graphic instead of wrapping when I drag the browser in. (I've tested it in the latest Firefox and Edge.)

Please tell me there is a solution. It's frustrating to not be able to figure out how to do something so simple.

Thanks!

Answer 1

By using flex on the .col-xs-12 div and a margin of auto on the .placard-body you can get the behaviour you're looking for:

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