Instead of text-align:center you can put all contents under a single div and then use following code to center the elements:

./# div_name{
    width:500px;
    margin:0 auto;
}

I’m creating an email, so the extent of CSS that I can use is very limited to what Email clients support. For example, display: flex or display: grid aren’t supported in many email clients.

I’m trying to achieve the image below, but I’m not 100% sure how I can achieve it without the use of grids or flexboxes.

Specifically, I’m not sure how to have just that 4.4 number centered (the number is generated dynamically, and it can have 3 or more digits in some cases), while keeping the arrow and the 0.2 above average chunk of text offset to the right of the 4.4 element.

I also can’t use the :after or :before pseudoelements, as those aren’t supported in the majority of email clients either.

Below is a rough example of what I have currently. The issue is pretty immediately obvious just from the small snippet below.

<div style="box-sizing: content-box; padding: 15px 0; width: 100%; text-align:center;">
  <h1>This Week's Ratings</h1>
  <h3>[IMAGE GOES HERE]</h3>
  <div style="margin: 0 auto;">
    <h2 style="display: inline-block">100</h2>
    <p style="display: inline-block">↑</p>
    <p style="display: inline-block">20 above<br>average</p>
  </div>
</div>

How would I go about modifying my above snippet to achieve the results I’m aiming for in the image?