Testo in fondo a Div

C’è un modo per ottenere il testo del contenuto di un div in fondo? Qui ho preparato un esempio.

http://jsfiddle.net/JGuP7/

Questa è la gerarchia di esempio:

Button Label

Sto cercando di ottenere il risultato senza aggiungere ulteriori span o modificare la gerarchia.

Tre possibili soluzioni, anche se ognuna ha i suoi avvertimenti.

demo di jsFiddle

La prima soluzione si basa sull’altezza della line-height: 220px; vertical-align: bottom; line-height: 220px; vertical-align: bottom; allineare il testo con il fondo del DIV . La seconda soluzione crea a :before psuedo-element che spinge il testo in fondo al DIV (questo non richiede markup aggiuntivo). Entrambe le soluzioni falliranno in IE7 o precedenti, ed entrambi avranno problemi se:

  • La dimensione del carattere cambia
  • Il testo si sposta su una seconda riga
  • La dimensione dell’elemento contenitore cambia

La terza soluzione si basa sul display: box; proprietà, che è una proprietà CSS che è in fase di eliminazione (maggiori dettagli su Quick Hits With the Flexible Box Model ). Questa soluzione è supportata solo da Chrome in quanto v4, Firefox dalla v2 e beta IE10. Tuttavia, un nuovo standard Flexbox è stato standardizzato, ma il supporto del browser è minimo. Questa soluzione potrebbe essere considerata “troppo nuova” per essere utilizzata in modo efficace ( html5please.com/#flexbox ).

In generale, dovresti considerare un nuovo elemento di avvolgimento attorno al tuo testo che consentirà la position: absolute; bottom: 0; position: absolute; bottom: 0; per rendere accogliente l’elemento in fondo all’elemento genitore. Ciò ha il vantaggio di far crescere l’elemento figlio verso l’ alto man mano che la dimensione del carattere o la lunghezza del testo aumentano, ed è agnostico rispetto alle dimensioni del contenitore genitore. A seconda di come il tuo posizionamento è critico per la tua posizione, puoi aggiungere questo nuovo elemento usando Javascript. Questo probabilmente non è l’ideale data la domanda che hai posto, ma il supporto del browser non è meno ideale per le soluzioni CSS più stravaganti che ho elencato sopra :-p

Un altro modo per farlo sarebbe usando “display: table-cell” e “vertical-align: bottom”.

http://jsfiddle.net/JGuP7/1/

 .button { display: table-cell; background-color: darkred; color: white; width: 120px; height: 120px; text-align: center; vertical-align: bottom; } 

Se si utilizza la position:relative nel contenitore e utilizzata

 position:absolute; bottom:0; 

nel contenuto, è ansible ottenere il risultato desiderato.

Il tuo CSS potrebbe essere simile a:

  .button { display: block; background-color: darkred; color: white; width: 120px; height: 120px; text-align: center; position: relative; } .bottomContent { position:absolute; bottom: 0; } 

e il tuo HTML:

 

Button Label

fonte