How to vertical-align an inline block in a line of text with CSS?

Spread the love

Sometimes, we want to vertical-align an inline block in a line of text with CSS.

In this article, we’ll look at how to vertical-align an inline block in a line of text with CSS.

To vertical-align an inline block in a line of text with CSS, we set the vertical-align property.

For instance, we write

<p>
  Some text <code>A<br />B<br />C<br />D</code> continues afterward.
</p>

to add the code element.

Then we write

code {
  background: black;
  color: white;
  display: inline-block;
  vertical-align: middle;
}

to add vertical-align: middle; to vertically center the text in the code element.

To vertical-align an inline block in a line of text with CSS, we set the vertical-align property.