CSS - Văn bản căn chỉnh dọc trong đoạn vị trí tuyệt đối

Question

Trước khi chúng tôi bắt đầu:
Vui lòng không đóng văn bản này dưới dạng trùng lặp với một câu hỏi khác. Tôi chỉ tìm kiếm ở đây trên Stackoverflow mà không tìm thấy trường hợp chính xác đó.

Gần nhất là tôi tin rằng this question. Tuy nhiên, các câu trả lời được đưa ra ở đó không thực sự làm việc cho tôi, tôi tin rằng vì đoạn văn được thiết lập position: absolute;.

Thats HTML:

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

Và 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; chỉ bumps văn bản một chút nhỏ đi từ trên xuống, nhưng không thực sự trong giữa.
Đặt khoảng thời gian position: absolute; và sau đó áp dụng top: 50%; và sau đó margin-top: -x%; sẽ không hoạt động vì chiều cao của khoảng không được gọi là nội dung động.
Mặc dù câu hỏi được liên kết nói rằng đây là thực hành không tốt, tôi cũng đã thử phương pháp display: table-cell mà không có bất kỳ kết quả nào. Làm ơn giúp tôi.

Answer 1

Loại bỏ thẻ p. Bạn đã có nó trong một li anyway.

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> 

Thử nghiệm trên cửa sổ IE9 và Chrome.

Không biết nếu nó là bản demo hay không nhưng nếu bạn muốn bóng màu đỏ trên hình ảnh làm cho một lớp cho một thẻ span sau đó chèn một khoảng mới với lớp.

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

Sắp xếp dọc là một điều khó khăn trong CSS, nhưng không khó thực hiện khi bạn quen thuộc với các bảng 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 Lên trên nơi yếu tố này trên đầu khác chỉ cần đảm vị trí #wrapper: cố định; chiều cao: 100%; chiều rộng: 100%; trái: 0px; trên cùng: 0px; hoặc với một vị trí sử dụng phần tử: tuyệt đối;

Answer 3

Nếu không cứng mã hóa một chiều cao giả định cho các văn bản hoặc hình ảnh, tôi (không may) không thể giải quyết việc này trong vòng chưa đầy 3 lớp:

1. Thiết lập vị trí tuyệt đối
2. Xây dựng bố trí bảng
3. Thiết lập bố cục ô bảng và căn chỉnh dọc: giữa

Kết hợp 1 và 2 dường như đã sẵn sàng nt chiều cao: 100% từ làm việc vì lý do không rõ với tôi.Tôi nghĩ rằng việc từ chối bố trí ô bảng dường như là sự chiếm đoạt phần cũ "không sử dụng bảng cho bố cục" meme; CSS là dành cho bố cục, do đó điều này không lạm dụng ngữ nghĩa phần tử. (Mặc dù tiếc là nó đòi hỏi ngữ nghĩa divs vô nghĩa.)

<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/