Come allineare verticalmente un blocco inline in una riga di testo?

136

Voglio creare un blocco inline che assumerà una larghezza e un'altezza sconosciute. (Avrà una tabella al suo interno con contenuti generati dinamicamente). Inoltre, il blocco in linea dovrebbe essere inserito in una riga di testo, ad esempio "il mio testo (BLOCCO QUI)". Per renderlo carino, sto cercando di rendere il blocco centrato verticalmente nella linea . Quindi se il blocco si presenta così:

TOP
MIDDLE
BOTTOM

Quindi la riga di testo leggerà: "Il mio testo ([MIDDLE])" (con TOP e BOTTOM sopra e sotto la riga)

Ecco cosa ho finora.

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>

Esempio

html vertical-alignment css

— Geoff
fonte

5

Magari redigilo e pubblica un'immagine di ciò che vuoi. Forse sono io, ma non ho idea di cosa tu stia chiedendo.

— Brent Frate

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>

Espandi frammento

Testato e funziona in Safari 5 e IE6 +.

— Midas
fonte

Ho usato la tua soluzione su un problema simile, ma sto cercando di centrare un triangolo CSS. Tuttavia, non è totalmente centrato. Cosa posso aggiungere alla tua ricetta per renderla totalmente centrata?

— CodyBugstein,

Posizione @Imray: relativa?

— Nino Škopac,

23

display: inline-block è tuo amico hai solo bisogno di tutte e tre le parti del costrutto - prima, il "blocco", dopo - per essere uno, quindi puoi allinearli verticalmente tutti al centro:

Esempio di lavoro

(sembra comunque la tua foto;))

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