CSS - wyrównanie pionowe tekstu w bezwzględnym położeniu akapit

Question

Zanim zaczniemy:
Nie zamykaj tego jako duplikatu innego pytania. Właśnie szukałem tutaj na Stackoverflow bez znalezienia tego dokładnego przypadku.

Najbliższy jest chyba this question. Mimo to, odpowiedzi tam podane naprawdę nie działają dla mnie, wierzę, ponieważ akapit jest ustawiony position: absolute;.

Ów HTML:

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

a 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; 
} 

Fiddle: http://jsfiddle.net/DpVjZ/

vertical-align: middle; prostu wpada tekst odrobinę z dala od góry, ale naprawdę nie w środek.
Ustawienie przęsła position: absolute;, a następnie zastosowanie top: 50%;, a następnie margin-top: -x%; nie będzie działać, ponieważ wysokość przęsła nie jest znana, ponieważ jest to zawartość dynamiczna.
Chociaż połączone pytanie mówi, że jest to zła praktyka, spróbowałem również podejścia display: table-cell bez żadnego wyniku. Proszę pomóż mi.

Answer 1

Pozbądź się znacznika p. Już i tak masz to w li.

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

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

Testowane na okna IE9 i Chrome.

Nie wiem, czy to było dla wersji demonstracyjnej czy nie, ale jeśli chcesz, aby czerwony odcień nad obrazem tworzył klasę dla znacznika zakresu, wstaw nowy zakres do klasy.

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

Wyrównanie w pionie jest trudne w CSS, ale nie jest trudne do osiągnięcia, gdy znasz tabele 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 Top miejsce ten element na górze inny po prostu zrobić pozycję #wrapper: fixed; wysokość: 100%; szerokość: 100%; left: 0px; top: 0px; lub z użyciem elementu use position: absolute;

Answer 3

bez sztywnego kodowania założonej wysokości dla tekstu lub obrazu, i (jeszcze) nie może rozwiązać ten problem w czasie krótszym niż 3 warstw:

1. Ustalenie położenia bezwzględnego
2. Ustalenie układu stołowego
3. Ustanowienie układ tabeli komórek i vertical-align: middle

Połączenie 1 i 2 wydaje się Preve Wysokość nt: 100% z pracy z nieznanych mi powodów.Myślę, że odrzucenie układu tabeli-komórki wydaje się być przywłaszczeniem starego memu "nie używaj stołów do układów"; CSS jest dla układu, więc nie jest to niewłaściwe użycie semantyki elementu. (Chociaż niestety wymaga semantycznie bezsensowne 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/