Domanda CSS: centraggio del testo assoluto posizionato all'interno del genitore relativo


Come posso centrare il testo posizionato in modo assoluto all'interno del genitore relativo fluido? Sto cercando di usare text-align:center sugli elementi genitori, ma centra sempre l'angolo sinistro del bambino, non l'elemento stesso.

http://jsfiddle.net/sucTG/2/


10
2017-08-09 13:21


origine


risposte:


Il fatto è questo position:absolute; modifica la larghezza dell'elemento per adattarsi al suo contenuto, e così via text-align: center; centra il testo all'interno della larghezza del blocco di elementi. Quindi se aggiungi un position: absolute; non dimenticare di aumentare la larghezza dell'elemento, oppure il text-align: center; la proprietà sarà inutile.

Il modo migliore per risolverlo è aggiungere un width: 100%; e a left: 0px; nella sezione .text.

http://jsfiddle.net/27van/


22
2017-08-09 13:39



Aggiornamento: Quello che ho messo prima era sbagliato / sbagliato

http://jsfiddle.net/brJky/1/

Questo dovrebbe essere MOLTO più vicino a quello che vuoi?

Il tuo testo è relativo e gli altri elementi all'interno del contenitore sono assoluti!

.text {
    color:#fff;
    padding:50px 0;
    display:block;
    position:relative;
}

.absolute {
    background:#f0f;
    height:25px; width:25px;
    position:absolute;
    top:36px; left:50%;
}

0
2017-08-09 13:33