CSS:allineare verticalmente del testo di un paragrafo Elemento in codice Medio
p.event_desc
{
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height:35px;
margin: 0px;
}
e HTML:
<p class="event_desc">Lorem ipsum.</p>
Come per allineare il testo nell'elemento p essere centrato in verticale?
Prova con -
display: table-cell;
vertical-align: middle;
padding: 10px;
Sono nuovo di HTML CSS. Ho provato a cercare una risposta che non riguardasse i tavoli (perché apparentemente sono cattivi ...). Questa risposta è stata troppo semplice da ignorare, quindi la sto usando. –
@vivekmaharajh L'utilizzo di tag di tabella HTML per il layout non è corretto. Non credo che sia brutto usare la tabella in 'display' per cose come questa. – Keavon
Cosa fare se si desidera che il paragrafo si estenda per l'intera larghezza ma contiene solo un paio di parole? –
È possibile utilizzare line-height per quello. Basta impostarlo all'altezza esatta del tag p.
p.event_desc {
line-height:35px;
}
Questa è una soluzione interessante ma non funziona se si desidera allineare il testo multilinea ... – Gatekeeper
@Gatekeeper in tal caso possiamo semplicemente allineare il paragrafo all'interno di un contenitore centrarlo verticalmente. Ad esempio con questo metodo: [Centering in the Unknown] (http://css-tricks.com/centering-in-the-unknown/). –
whow, in realtà hai fatto imparare qualcosa di nuovo venerdì pomeriggio ... cool MrGreen – Gatekeeper
si potrebbe usare
line-height:35px;
È davvero non dovrebbe impostare un altezza sul paragrafo come la sua non buona per l'accessibilità (quello succede se l'utente aumenta le dimensioni del testo, ecc.)
invece utilizzare un div con un'altezza e la p al suo interno con il corretto line-height:
<div style="height:35px;"><p style="line-height:35px;">text</p></div>
Prova questa:
display: table-cell;
vertical-align: middle;
padding: 10px;
Hai provato a giocare con il margine? Ho avuto lo stesso problema, è per questo che sono qui :)
Ecco cosa mi ha aiutato:
element {
margin: auto;
}
Se avete bisogno di essere allineato a sinistra oa destra e centro, si può do:
element {
margin-top: auto;
margin-bottom: auto; /*You can use shorthand*/
}
Questo sarà Allinea verticalmente all'interno dell'elemento di contenimento e sc aprilo sul lato destro.
Spero che questo sia utile :)
Possibile dublicate: http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-high-div/10939940 –
La differenza è che questo ha altezza fissa e nessun genitore – Julix