Como alinhar verticalmente um bloco embutido em uma linha de texto?
Eu quero criar um bloco embutido que terá 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 parecer 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;
}
<div class="example">TOP<br />MIDDLE<br />BOTTOM</div>