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

centrar texto horizontalmente css

Question

Quiero crear un bloque en línea que tendrá un ancho y 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, intento hacer que el bloque se centre verticalmente en la línea . Entonces, si el bloque se ve así:

TOP
MIDDLE
BOTTOM

Luego, la línea de texto mostrará: "Mi texto ([MIDDLE])" (con TOP y BOTTOM arriba y debajo 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>

Answer 1

display: inline-block es tu amigo, solo necesitas las tres partes de la construcción, antes, el "bloque", después, para ser una, entonces puedes alinearlas verticalmente a la mitad:

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>

Answer 2

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 +.