Як вертикально вирівняти рядковий блок в рядку тексту?

136

Я хочу створити вбудований блок, який матиме невідому ширину та висоту. (У ній буде таблиця із динамічно генерованим вмістом). Далі вкладений блок слід розмістити всередині рядка тексту, наприклад "мій текст (БЛОК ТУТ)". Щоб це виглядало красиво, я намагаюся зробити блок вертикально по центру в лінії . Отже, якщо блок виглядає так:

TOP
MIDDLE
BOTTOM

Тоді в рядку тексту буде написано: "Мій текст ([СРЕДНЯ])" (з TOP і BOTTOM над і під рядком)

Ось що я маю досі.

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>

Приклад

html vertical-alignment css

— Джефф
джерело

5

Можливо, намалюйте його та опублікуйте зображення того, що ви хочете. Можливо, це я, але я поняття не маю, про що ви питаєте.

— Брат Петра

168

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

— Мідас
джерело

Я використовував ваше рішення для подібної проблеми, але я намагаюся зосередити трикутник CSS. Однак це не зовсім зосереджено. Що я можу додати до вашого рецепту, щоб зробити його цілком по центру?

— CodyBugstein

@Imray Позиція: відносна?

— Ніно Шкопак

23

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>

— кларезузи
джерело