Sto cercando di centrare il testo sia verticalmente che orizzontalmente su un'immagine che cresce quando la pagina si allarga.Testo verticalmente e orizzontalmente centrato su un'immagine reattiva
Originariamente avevo impostato l'immagine come sfondo per un div di altezza fissa, nel qual caso era relativamente facile centrarlo, ma poiché le immagini di sfondo non sono strutturali, non potrei impostare l'altezza per essere un funzione automatica della larghezza, e ho dovuto buttare questa opzione quando sono andato per un design più reattivo.
Così ho attualmente un div con due elementi in esso, img e testo overlay. La larghezza dell'immagine è impostata al 100% della larghezza del suo contenitore e l'altezza varia di conseguenza. Di conseguenza, non posso impostare il testo di sovrapposizione come posizione: assoluta e superiore: 80px o qualcosa, perché la distanza dalla parte superiore dovrà variare. E anche facendo top: 25% o qualsiasi altra cosa non funziona, perché a) se la larghezza della pagina si riduce per comprimere il testo, o se c'è solo più testo, il centraggio verticale viene eliminato quando ci sono più/meno linee, e b) la percentuale è arbitraria - non è 50 o qualcosa del genere, perché ciò metterebbe il in cima del testo sovrapposto del 50% verso il basso l'immagine, quando voglio il centro dell'overlay .
Ho guardato, tra l'altro, a this post, che è decisamente vicino - ma in entrambe le soluzioni, l'altezza dell'immagine non è in grado di ridimensionare, e nel primo caso, il JS si carica al caricamento della pagina, ma poi si blocca , così se cambio la larghezza/altezza della pagina, le cose finiscono male. Idealmente, questa soluzione non coinvolgerebbe JS proprio per quel motivo (anche se ricaricato su ogni ridimensionamento, che non sembra ideale), ma se questa è l'unica soluzione, la prenderò.
Inoltre, solo per i dettagli aggiunti/divertimento, ho impostato un altezza massima sull'immagine, perché non voglio che superi l'altezza di circa 300px, anche su un monitor cinematografico.
Basic fiddle of current attempt here e codice identico di seguito. Qualche idea? Grazie!
html
<div class='quotation_div'>
<img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
<div class='overlay'>
<p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
</div>
</div>
css
.quotation_div {
position: relative;
display: table;
}
img {
width: 100%;
max-height: 300px;
}
.overlay {
z-index: 99;
width: 70%;
margin-left: 15%;
vertical-align: middle;
position: absolute;
top: 25%; /* Obvious problem, cause it's arbitrary */
}
p {
text-align: center;
color: red;
font-size: 165%;
font-weight: lighter;
line-height: 2;
}
Possibile duplicato http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div – user1477388
Eventuale duplicato http://stackoverflow.com/questions/14113676/vertically-center-a-div-with-variable-height-within-a-div-that-is-100-of-the-vi – user1477388
Un'altra soluzione qui: http: //stackoverflow.com/questions/21562253/vertical-centering-some-text-over-an-image-with-dynamic-height/21562992#21562992 –