Geoff Geoff - 2 years ago 146
CSS Question

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

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 "my text (BLOCK HERE)". To make it look pretty, I'm trying to make the block be vertically centered in the line. So if the block looks like this:


Then the line of text will read: "My text ( [MIDDLE] )" (with TOP and BOTTOM above and below the line)

Here's what I have so far.


.example {
background-color: #0A0;
display: inline-block;
margin: 2px;
padding: 2px;
position: relative;
text-align: center;


<div class="example">TOP<br />MIDDLE<br />BOTTOM</div>


Answer Source

code {
    background: black;
    color: white;
    display: inline-block;
    vertical-align: middle;
<p>Some text <code>A<br />B<br />C<br />D</code> continues afterward.</p>

Tested and works in Safari 5 and IE6+.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download