¿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


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

Respuestas:


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>

Probado y funciona en Safari 5 e IE6 +.


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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.