JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<a href="https://canvas.codes/" style="color: #3a6ae0; font-weight: bold; text-decoration: none;">
  <img src="https://canvas.codes/static/img/hexagon.svg" alt="" width="32" height="32" style="vertical-align: middle;">
  <span style="vertical-align: middle; margin-left: 8px;">Canvas</span>
</a>

<p>Check it out! <a href="https://canvas.codes/@PullJosh" style="color: #3a6ae0;">@PullJosh</a> replied to your forum topic <a href="https://canvas.codes/project/webpage/U5cZErQTD/magic-color-button" style="color: #3a6ae0;">How do I center things vertically in CSS?</a>:</p>

<a href="https://canvas.codes/" style="color: #000000; text-decoration: none;">
  <blockquote style="background: #f4f5f7; border-radius: 4px; padding: 8px 20px 1px 20px; margin: 32px;">
    <p>
      <img src="https://lh4.googleusercontent.com/-K2P_E_UDnzA/AAAAAAAAAAI/AAAAAAAADcU/Xayf_apAjrU/photo.jpg" alt="" width="20" height="20" style="vertical-align: middle; border-radius: 3px;" />
      <strong style="vertical-align: middle;">PullJosh says:</strong>
    </p>
    <div style="font-size: 18px; line-height: 1.4;">
      <p>
        It's complicated. For the best results, you probably want to use flexbox. Simply setting <code>align-items: center;</code> on the parent or <code>align-self: center;</code> on the child should do the trick.
      </p>
      <p>
        If you want to do it without flexbox, you'll have to try to make do with <code>vertical-align: middle;</code>. You pretty much have to set it on every child in the entire element though, and even then, it's janky.
      </p>
      <p>
        Good luck! :)
      </p>
    </div>
  </blockquote>
</a>

<p>
  If you don't want these emails any more, no worries. You can <a href="https://canvas.codes/settings" style="color: #3a6ae0;">change your notification settings</a> any time. And if there's anything you want to say, <a href="mailto:[email protected]" style="color: #3a6ae0;">my inbox is always open</a>.
</p>

<p>
  Have a good one! 😄
</p>

CSS

body {
  font-family: sans-serif;
  font-size: 14px;
}