배경 이미지를 텍스트와 세로로 정렬하는 방법은 무엇입니까?

Question

일정한 (따라서 자동 및 재사용 할 수없는) 상수 값을 height 또는 line-height에 지정하지 않고 배경 이미지를 텍스트와 수직으로 정렬하는 데 문제가 있습니다. 내가 실제로 어떻게 수직으로 중심 정렬하는 방법인지 궁금 해서요, 그리고 a 요소 , with its text without assigning constant values to 라인 높이 or 높이`의 bg 이미지를 정렬?

라이브 데모는 여기에서 확인할 수 있습니다. http://cssdesk.com/8Jsx2.

다음은 HTML입니다 :

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

그리고 여기에 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

center에 당신이 항상 중심 것이다 배경 이미지를 background CSS를 사용하여. 이 문제는 텍스트를 컨트롤 중간에 정렬하는 것입니다.

라인 높이를 지정하기 위해 em 단위를 사용해 보셨습니까? 수직 중심이 발생할 수 있도록 높이를 지정해야합니다.

em을 사용하지 않으려면 display:table-cell css를 시도해보세요.

확인 - http://cssdesk.com/3ZXrH - 위의 두 가지 예입니다. 어떤 일이 벌어지고 있는지 더 잘 보여주기 위해 height:10em;을 추가했습니다.

Answer 2

배경 이미지가 포함 된 요소의 높이에 영향을주지 않으므로 CSS만으로는 가능하지 않다고 생각합니다. 당신은 배경 이미지의 크기를 감지해야하고 자바 스크립트가 필요합니다. Javascript에서 요소의 너비와 높이를 감지하면 배경 이미지에서 img이 생성됩니다.

동작 예 : 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 여기

자바 스크립트와 display: table를 사용하는 해결책은 원하는 결과를 달성하는 것 :

$(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); 

}); 

17,451,515,나는 다음과 같은 소스 CSS를 사용하여 배경을 정렬하기 위해이 개 단어를 사용 How do I get background image size in jQuery?

Answer 3

시도에서 내 대답을 기반으로.

background-position: left center; 

참조 : http://www.w3schools.com/cssref/pr_background-position.asp

의