วิธีการจัดแนวบล็อกในบรรทัดในแนวตั้ง?

ฉันต้องการสร้างบล็อกแบบอินไลน์ซึ่งจะทำให้เกิดความกว้างและความสูงที่ไม่รู้จัก (มันจะมีตารางอยู่ข้างในพร้อมเนื้อหาที่สร้างขึ้นแบบไดนามิก) นอกจากนี้บล็อกอินไลน์ควรอยู่ในบรรทัดข้อความเช่น "ข้อความของฉัน (บล็อกที่นี่)" ที่จะทำให้มันดูสวยฉันพยายามที่จะทำให้บล็อกเป็นศูนย์กลางในแนวเส้น ดังนั้นถ้าบล็อกมีลักษณะเช่นนี้:

TOP
MIDDLE
BOTTOM

จากนั้นบรรทัดข้อความจะอ่าน: "ข้อความของฉัน ([MIDDLE])" (พร้อมด้านบนและล่างด้านบนและด้านล่างบรรทัด)

นี่คือสิ่งที่ฉันมี

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>

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>

ผ่านการทดสอบและใช้งานได้ใน Safari 5 และ IE6 +

display: inline-block คือเพื่อนของคุณที่คุณต้องการโครงสร้างทั้งสามส่วน - ก่อนหน้านี้คือ "บล็อก" หลังจาก - เป็นส่วนหนึ่งจากนั้นคุณสามารถจัดแนวพวกเขาทั้งหมดให้อยู่ตรงกลาง:

ตัวอย่างการทำงาน

(ดูเหมือนว่ารูปภาพของคุณจะเป็นอย่างไร))

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>