Как выровнять inline-блок по вертикали в строке текста?

136

Я хочу создать встроенный блок, который будет иметь неизвестную ширину и высоту. (Внутри него будет таблица с динамически генерируемым содержимым). Кроме того, встроенный блок должен быть помещен внутри строки текста, например «мой текст (БЛОК ЗДЕСЬ)». Чтобы это выглядело красиво, я пытаюсь сделать блок вертикально центрированным по линии . Так что, если блок выглядит так:

TOP
MIDDLE
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 Geoff
источник
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>
clairesuzy
источник