Làm cách nào để căn giữa theo chiều dọc căn chỉnh hình nền với văn bản?

Question

Tôi gặp sự cố khi căn chỉnh hình nền theo chiều dọc với văn bản, mà không gán giá trị hằng số (và do đó, không tự động và có thể sử dụng lại) cho height hoặc line-height. Tôi đã tự hỏi nếu có thực sự là một cách để theo chiều dọc trung tâm align bg hình ảnh của, nói và a yếu tố , with its text without assigning constant values to line-height or height`?

Bản trình diễn trực tiếp có tại đây: http://cssdesk.com/8Jsx2.

Đây là HTML:

<a class="">background-position: center</a> 
<a class="contain">background-size: contain</a> 
<a class="line-height">Constant line-height</a> 

Và đây là CSS:

a { 
    display: block; 
    margin: 10px; 
    width: 200px; 
    padding-left: 34px; 
    font-size: 14px; 

    background: url('http://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Thumbs%20up.png'); 
    background-repeat: no-repeat; 
    background-position: 5px center; 

    border: 1px solid black; 
} 

/* I don't want to use constant line-height */ 
.line-height { 
    line-height: 24px; 
} 

/* I don't want to use this, because I want my bg image's size to stay intact */ 
.contain { 
    background-size: contain; 
} 

Answer 1

Bằng việc sử dụng background css để center hình nền, bạn sẽ có nó luôn làm trung tâm. Vấn đề là sự liên kết của văn bản đến giữa điều khiển.

Bạn đã cân nhắc sử dụng đơn vị em để chỉ định chiều cao dòng? Bạn sẽ cần phải chỉ định một số loại chiều cao để cho phép trung tâm dọc diễn ra.

Hoặc, nếu bạn không muốn sử dụng em, bạn có thể thử display:table-cell css.

Kiểm tra - http://cssdesk.com/3ZXrH - cho hai ví dụ trên. Tôi đã thêm height:10em; để minh họa rõ hơn những gì đang diễn ra.

Answer 2

Tôi không nghĩ rằng điều này là có thể với CSS một mình vì hình nền không ảnh hưởng đến chiều cao của phần tử chứa của chúng. Bạn sẽ cần phải phát hiện kích thước của hình nền và điều đó sẽ yêu cầu javascript. Phát hiện chiều rộng và chiều cao của một phần tử trong Javascript liên quan đến việc tạo một img từ hình nền.

Dưới đây là một giải pháp có sử dụng javascript và display: table để đạt được kết quả mong muốn:

dụ làm việc: http://jsbin.com/olozu/9/edit

CSS:

div { 
    display: table; 
} 

a { 
    display: table-cell; 
    vertical-align: middle; 
    margin: 10px; 
    width: 200px; 
    padding-left: 34px; 
    font-size: 14px; 

    background: url('http://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Thumbs%20up.png'); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    border: 1px solid black; 
} 

HTML:

<div>< 
    <a id="example-a">background-position: center</a> 
</div> 

JS :

$(function() { 

    var imageSrc = $('#example-a') 
       .css('background-image') 
        .replace('url(', '') 
         .replace(')', '') 
         .replace("'", '') 
         .replace('"', ''); 

    var image = '<img style="display: none;" src="' + imageSrc + ' />'; 

    $('div').append(image); 

    var width = $('img').width(), 
     height = $('img').height(); 

    // Set the height of the containing div to the height of the background image 
    $('#example-a').height(height); 

}); 

tôi dựa câu trả lời của tôi trên nguồn sau How do I get background image size in jQuery?

Answer 3

Hãy thử sử dụng hai từ để gắn kết nền của bạn với css.

background-position: left center; 

tham khảo: http://www.w3schools.com/cssref/pr_background-position.asp