上に中心。テキストは垂直方向と水平方向、私はページが広くなったときに成長した画像の上に垂直方向と水平方向の両方のテキストを中央にしているよ応答画像
私はもともとそれをセンタリングすることは比較的容易であった場合に一定の高さのDIVの背景として設定された画像を有していたが、背景画像は構造ではないので、私があると高さを設定することができませんでした幅の自動機能で、私はより反応性の高いデザインに向かいましたが、このオプションを外さなくてはなりませんでした。
だから私は現在、その中の二つの要素、IMGとオーバーレイテキストをdiv要素を持っています。画像の幅はコンテナの幅の100％に設定され、それに応じて高さが変わります。絶対とトップ：80pxか何か、トップからの距離が変化することがありますので、結果として、しかし、私はpostionするオーバーレイテキストを設定することはできません。 a）の場合、ページ幅が縮小されてテキストが圧縮されている場合、またはテキストがもう少しあれば、それ以上の/より少ないテキストがある場合は垂直のセンタリングがオフになります。トップ：25％オーバーレイの中心をそこに置いておきたい場合は、画像の下にテキストのオーバーレイのテキストをトップの50％下に置くことになるので、パーセンテージは任意です - それは50ではありません。 。
間違いなく近くにあるthis postで見ましたが、どちらのソリューションでも画像の高さは変更できません。前者では、JSはページの読み込み時に読み込みますが、フリーズしますので、私はページの幅/高さを変更すると、物事はうんざりする。理想的には、このソリューションはJSをその理由で（たとえそれがすべてのサイズ変更でリロードされても理想的でないと感じても）関与しないでしょうが、それが唯一の解決策であればそれを取っていきます。私はそれがおよそ300ピクセルの高さを超えることはしたくないので
はまた、単に付加的な詳細/楽しみのために、私もシネマディスプレイに、画像上の最大の高さを設定しました。
Basic fiddle of current attempt here、以下同じコード。何か案は？ありがとう！
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;
}
可能な複製http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div – user1477388
可能な重複http://stackoverflow.com/questions/14113676/vertically-center-a-div-with-variable-height-within-a-div-that-is-100-of-the-vi – user1477388
こちらの別の解決方法：http： //stackoverflow.com/questions/21562253/vertical-centering-some-text-over-an-image-with-dynamic-height/21562992#21562992 –