¿Cómo alinear verticalmente un bloque en línea en una línea de texto?

136

Quiero crear un bloque en línea que tendrá un ancho y una altura desconocidos. (Tendrá una tabla dentro con contenido generado dinámicamente). Además, el bloque en línea debe colocarse dentro de una línea de texto, como "mi texto (BLOQUEAR AQUÍ)". Para que se vea bonito, estoy tratando de hacer que el bloque esté centrado verticalmente en la línea . Entonces, si el bloque se ve así:

TOP
MIDDLE
BOTTOM

Luego, la línea de texto se leerá: "Mi texto ([MEDIO])" (con ARRIBA y ABAJO arriba y abajo de la línea)

Esto es lo que tengo hasta ahora.

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>

Ejemplo

html vertical-alignment css

— Geoff
fuente

55

Tal vez redactarlo y publicar una imagen de lo que quieres. Tal vez soy yo, pero no tengo idea de lo que estás preguntando.

— Brent Fray

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 fragmento

Probado y funciona en Safari 5 e IE6 +.

— Midas
fuente

Usé su solución en un problema similar, pero estoy tratando de centrar un triángulo CSS. Sin embargo, no está totalmente centrado. ¿Qué puedo agregar a su receta para que esté totalmente centrada?

— CodyBugstein

@Imray Posición: ¿relativo?

— Nino Škopac

23

display: inline-block es tu amigo, solo necesitas que las tres partes de la construcción, antes, el "bloque", después, sean una sola, luego puedes alinearlas verticalmente en el medio:

Ejemplo de trabajo

(se parece a tu foto de todos modos;))

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
fuente