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>
This question is related to
html
vertical-alignment
css
The answer is
code {_x000D_
background: black;_x000D_
color: white;_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
}<p>Some text <code>A<br />B<br />C<br />D</code> continues afterward.</p>Tested and works in Safari 5 and IE6+.
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>
Source: Stackoverflow.com