title: How to vertical align an inline-block in a line of text?
body: <p>I want to create an inline-block that will take on some unknown width and height. (It'll have a table inside it with content dynamically generated).  Further, the inline-block should be placed inside a line of text, such as &quot;my text (BLOCK HERE)&quot;.  To make it look pretty, <strong>I'm trying to make the block be vertically centered in the line</strong>.  So if the block looks like this:</p>
  <pre><code>TOP
  MIDDLE
  BOTTOM
  </code></pre>
  <p>Then the line of text will read: &quot;My text ( [MIDDLE] )&quot; (with TOP and BOTTOM above and below the line)</p>
  <p>Here's what I have so far.</p>
  <h3>CSS</h3>
  <pre><code>.example {
    background-color: #0A0;
    display: inline-block;
    margin: 2px;
    padding: 2px;
    position: relative;
    text-align: center;
  }
  </code></pre>
  <h3>HTML</h3>
  <pre><code>&lt;div class=&quot;example&quot;&gt;TOP&lt;br /&gt;MIDDLE&lt;br /&gt;BOTTOM&lt;/div&gt;
  </code></pre>
  <p><img src="https://i.stack.imgur.com/0UAAb.png" alt="Example" /></p>