Text vertikal und horizontal zentriert über eine ansprechende Bild

Ich bin auf der Suche nach text zentrieren vertikal und horizontal über ein Bild, das wächst, wenn die Seite breiter.

Ursprünglich hatte ich das Bild als hintergrund für ein div der eine Feste Höhe, in dem Fall war es relativ einfach, um es, aber, weil die hintergrund Bilder sind nicht strukturelle, konnte ich nicht die Höhe, um eine automatische Funktion der Breite, und ich musste werfen Sie diese option aus, wenn ich ging für eine ansprechende Gestaltung.

Also ich habe momentan noch ein div mit zwei Elementen, img und text-overlay. Die Breite des Bildes auf 100% eingestellt ist von der Breite des Containers, und die Höhe variiert dementsprechend. Als Folge, allerdings kann ich nicht die overlay-text Position:absolute und top:80px oder so, weil die Entfernung von der Spitze wird, zu variieren. Und sogar top:25% oder was auch immer nicht funktioniert, weil a) wenn die Seite Breite schrumpft, drücken Sie die text, oder wenn es nur mehr text, die vertikale Zentrierung ist abgeworfen, wenn es mehr/weniger Zeilen, und b) der Prozentsatz ist willkürlich-es ist nicht 50 oder so, denn würde, dass die top der text-overlay-50% nach unten das Bild, wenn ich will, dass die Mitte des overlay -, dort zu sein.

Ich habe gesucht, unter anderem bei dieser Beitrag, das ist definitiv in der Nähe-aber in beiden Lösungen, die Bildhöhe ist unfähig, vergrößern /verkleinern und in der ehemaligen JS Lasten bei Seite zu laden, aber dann friert, so dass, wenn ich ändern Seite Breite/Höhe, wo die Dinge aus dem Gleichgewicht geraten. Im Idealfall ist diese Lösung würde nicht mit JS nur deshalb (auch wenn es reloaded, die auf jeder Größe, fühlt sich das nicht-ideale), aber wenn das die einzige Lösung ist, werde ich es nehmen.

Auch, nur für zusätzliche details/Spaß, ich habe eine max-Höhe auf dem Bild, weil ich nicht wollen, es zu überschreiten, etwa 300px Höhe, sogar auf einem cinema display.

Basic fiddle von den aktuellen Versuch hier, und den identischen code. Irgendwelche Ideen? Danke!

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;
}
InformationsquelleAutor Sasha | 2013-07-23
Schreibe einen Kommentar