CSS - 絶対配置された段落のテキストを垂直に整列する

Question

開始前：
別の質問と重複しないようにしてください。私はちょうどその正確なケースを見つけることなく、Stackoverflowでここで検索しました。

最も近いのはthis questionです。それでも、そこに与えられた返事は私のためには本当にうまくいかない、私は段落がposition: absolute;に設定されていると信じている。

<ul> 
    <li><img src="http://www.placehold.it/300x200" /><p><span>Lorem Ipsum</span></p></li> 
</ul> 

とCSS：

li { 
    position: relative; 
    float: left; 
    overflow: hidden; 
} 

img { 
    width: 100%; 
    vertical-align: middle; 
} 

p { 
    background-color: rgba(255, 0, 0, .3); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

span { 
    background-color: rgba(0, 255, 0, .3); 
    vertical-align: middle; 
} 

フィドル：http://jsfiddle.net/DpVjZ/

vertical-align: middle;だけでほんの少し離れトップからテキストをバンプではなく、実際にHTMLザッツ

真ん中。
スパンの高さが動的コンテンツであるとは知られていないため、スパンをposition: absolute;に設定してからtop: 50%;、次にmargin-top: -x%;を適用すると機能しません。
リンクされた質問にはこれは悪い習慣であると書かれていますが、私はdisplay: table-cellのアプローチを試みましたが、何の結果もありませんでした。私を助けてください。

Answer 1

pタグを削除します。とにかくあなたはすでにそれを李に持っています。

CSS

li { 
position: relative; 
float: left; 
overflow: hidden; 
} 

img { 
width: 100%; 
height: 100%; 
} 

span { 
background-color: rgba(0, 255, 0, .3); 
position: absolute; 
text-align:center; 
width: 100%; 
top:46%; 
} 

HTMLウィンドウIE9とChromeでテスト

<ul> 
<li><span>Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li> 
</ul> 

。

デモ用であるかどうかわかりませんが、画像上に赤い陰影を付けたい場合は、スパンタグ用のクラスを作成し、そのクラスに新しいスパンを挿入します。

span.text { 
background-color: rgba(0, 255, 0, .3); 
position: absolute; 
text-align:center; 
width: 100%; 
top:46%; 
} 

span.redshade { 
background-color: rgba(255, 0, 0, .3); 
width: 100%; 
height: 100%; 

<ul> 
<li><span class="redshade">&nbsp;</span><span class="text">Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li> 
</ul> 

Answer 2

垂直整列はCSSでは難しいことですが、CSS表に精通しているときに達成するのは難しくありません。

<style> 
     html, body, #wrapper { height: 100%; } 
     #wrapper { display: table; width: 100%; } /* Create space */ 
     #wrapper > * { display: table-cell; vertical-align: middle; } /* table-cells can be verticaly aligned! */ 
     #wrapper > * > .container { display: block; margin: auto; width: 600px; border: 1px solid #000000; } /* Horizontal align */ 
</style> 

<div id="wrapper"> 
    <section id="main"> 
    <div class="container"> 
     <p> 
     I'm centered in a fluid layout! :D 
     </p> 
    </div> 
    </section> 
</div> 

EDIT トップの場所上に、この要素別だけ#wrapper位置します固定。高さ：100％;幅：100％;左：0ピクセル。 top：0px;要素の使用位置に関係なく、

Answer 3

テキストまたはイメージの想定高さをハードコーディングせず、私は（残念ながら）3未満の層でこれを解決することができない。

1. はテーブルレイアウトを確立絶対位置
2. を確立します1および2を組み合わせる

がpreveように見える中央：

は、テーブルのセルのレイアウトと垂直整列を確立しますntの高さ：100％の理由から私には分かりません。私は、テーブルセルレイアウトの拒絶は、古い「レイアウトのためのテーブルを使用しない」memeの悪用と思われる。 CSSはレイアウト用ですので、要素のセマンティクスを悪用することはありません。 （残念ながら、それは意味的に意味のないdivを必要としますが。）

<ul> 
<li> 
    <img src="http://www.placehold.it/300x200" /> 
    <div class="absolute"> 
     <div class="table"> 
      <div class="middle"> 
       <p><span>Lorem Ipsum</span> 
       </p> 
      </div> 
     </div> 
    </div> 
</li> 
</ul> 


li { 
    position: relative; 
    float: left; 
    overflow: hidden; 
} 
img { 
    width: 100%; 
} 
.absolute, .table, .middle { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.absolute { 
    position: absolute; 
} 
.table { 
    display: table; 
} 
.middle { 
    display: table-cell; 
    vertical-align: middle; 
} 
p { 
    background-color: rgba(255, 0, 0, .3); 
} 
span { 
    background-color: rgba(0, 255, 0, .3); 
} 

http://jsfiddle.net/svachalek/vTGxx/4/