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

Question

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:

TOP
MIDDLE
BOTTOM

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.

CSS

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

HTML

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

Example

Maybe draw it up and post an image of what you want. Maybe it's me, but I have no idea what you are asking. — Brent Friar, May 09 '11 at 03:59

Midas · Accepted Answer · 2016-06-06T15:49:00.507

167

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+.

edited Jun 06 '16 at 15:49

answered May 31 '11 at 17:06

Midas

6,704
5
30
51

I used your solution on a similar problem, but I'm trying to center a CSS Triangle. However, it's not totally centered. What can I add to your recipe to make it totally centered? – CodyBugstein Mar 21 '14 at 11:57
@Imray Position: relative ? – The Onin Dec 10 '15 at 20:30

score 23 · Answer 2 · edited Jun 20 '20 at 09:12

display: inline-block is your friend you just need all three parts of the construct - before, the "block", after - to be one, then you can vertically align them all to the middle:

Working Example

(it looks like your picture anyway ;))

CSS:

p, div {
  display: inline-block; 
  vertical-align: middle;
}
p, div {
  display: inline !ie7; /* hack for IE7 and below */
}

table {
  background: #000; 
  color: #fff; 
  font-size: 16px; 
  font-weight: bold; margin: 0 10px;
}

td {
  padding: 5px; 
  text-align: center;
}

HTML:

<p>some text</p> 
<div>
  <table summary="">
  <tr><td>A</td></tr>
  <tr><td>B</td></tr>
  <tr><td>C</td></tr>
  <tr><td>D</td></tr>
  </table>
</div> 
<p>continues afterwards</p>

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

CSS

HTML

2 Answers2

Working Example

Linked

Related