Thuộc tính chiều cao dòng có thể thừa kế Thuộc tính Chiều cao của Phụ huynh Div hay Quyền truy cập Chiều cao Tài sản của Div mà Nó Thuộc?

Question

Tôi có một div có chiều cao 50px chứa div con. Chiều cao của div con là được thừa kế từ cha mẹ bằng cách sử dụng cặp thuộc tính/giá trị css: chiều cao: 100%.

<div style="height: 50px;"> 
     <div style="height: 100%;">Some Text</div> 
    </div>    

Tôi muốn verically sắp xếp văn bản trong div đứa trẻ và làm như vậy tôi thêm các line-height tài sản cho các div con.

<div style="height: 50px;"> 
     <div style="height: 100%; line-height: 50px;">Some Text</div> 
    </div>    

ý rằng cho line-height tôi phải xác định một cách rõ ràng chiều cao như 50px.

Các div đứa trẻ có thể thừa hưởng các chiều cao tài sản từ cha mẹ (sử dụng height: 100%) nhưng đối với line-height tôi phải thiết lập một cách rõ ràng giá trị?

Nếu vậy, đây là (IMO) kindof lộn xộn vì chúng ta hãy nói rằng tôi có một div mà được lồng 10 cấp độ sâu và nó được thừa hưởng các chiều cao sở hữu tất cả các con đường xuống. Sau đó, nếu tôi muốn căn chỉnh theo chiều dọc văn bản trong div này, tôi phải không chỉ mã cứng giá trị bằng với chiều cao của div mẹ trên cùng nhưng tôi có điều hướng thông qua mã của tôi để tìm cha mẹ rõ ràng xác định chiều cao.

Lưu ý rằng tôi không muốn xác định chiều cao dòng ở cấp độ gốc và sau đó sử dụng kế thừa tại nút con để nhận giá trị.

Nó sẽ được tốt đẹp nếu có một cách để thiết lập line-height bằng với chiều cao của div rằng nó nằm trong lẽ cú pháp sẽ trông giống như sau (hoàn toàn tạo thành):.

<div style="height: 100%; line-height: from-property('height');">Some Text</div> 

Nơi chiều cao dòng sử dụng phương thức từ thuộc tính để truy cập thuộc tính chiều cao. (Có, tôi biết có một phương pháp như từ bất động sản giới thiệu tiềm năng cho một phụ thuộc vòng tròn vì vậy có lẽ một số cách khác sẽ tốt hơn. Tôi chỉ đơn giản sử dụng nó để thể hiện những gì tôi muốn có.)

Cảm ơn!

Jan

Answer 1

Bạn có thể sử dụng jQuery để làm việc ra chiều cao của parent() và sau đó để thêm line-height động dựa trên chiều cao đó?

Nó sẽ giống như thế:

$(document).ready(function(){ 

    $('.lineHeightDiv').each(function(){ 
     var div_height = $(this).parent('div').height(); 
     $(this).css('lineHeight', (div_height/2) + "px"); 
    }); 

}); 

Answer 2

line-height được thiết kế để thiết lập khoảng cách giữa các dòng, và sử dụng để sắp xếp một cái gì đó theo chiều dọc không phải là một lựa chọn tốt. Trừ khi bạn chắc chắn nội dung sẽ luôn nằm trong một dòng.

Sử dụng tính năng này để làm cho nó ở giữa, không hoàn hảo.

div.parent { 
    display: table-cell; 
    vertical-align: middle; 
}