Como alinhar verticalmente um bloco embutido em uma linha de texto?

136

Eu quero criar um bloco embutido que terá uma largura e altura desconhecidas. (Ele terá uma tabela com conteúdo gerado dinamicamente). Além disso, o bloco embutido deve ser colocado dentro de uma linha de texto, como "meu texto (BLOCO AQUI)". Para torná-lo bonito, estou tentando fazer com que o bloco seja centralizado verticalmente na linha . Portanto, se o bloco estiver assim:

TOP
MIDDLE
BOTTOM

Em seguida, a linha de texto exibirá: "Meu texto ([MÉDIO])" (com TOP e BOTTOM acima e abaixo da linha)

Aqui está o que eu tenho até agora.

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>

Exemplo

html vertical-alignment css Geoff
fonte
5
Talvez elabore e publique uma imagem do que você deseja. Talvez seja eu, mas não tenho ideia do que você está perguntando.
Brent Friar

Respostas:

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>
Expandir snippet

Testado e funciona no Safari 5 e IE6 +.

Midas
fonte
Usei sua solução em um problema semelhante, mas estou tentando centralizar um triângulo CSS. No entanto, não é totalmente centralizado. O que posso adicionar à sua receita para torná-la totalmente centralizada?
CodyBugstein
@Imray Position: relativo?
Nino Škopac
23

display: inline-block é seu amigo, você só precisa que todas as três partes da construção - antes, o "bloco", depois - sejam uma, então você pode alinhar verticalmente todas elas ao meio:

Exemplo de trabalho

(parece sua foto de qualquer maneira;))

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
fonte