Как вертикально центрировать выравнивание фонового изображения с текстом?

У меня возникают проблемы с вертикальным выравниванием фонового изображения с текстом, не присваивая значениям констант (и, следовательно, не автоматическим и многократным) значениям height или line-height. Мне было интересно, есть ли способ вертикально центрировать выравнивание изображения bg, скажем, и a element , with its text without assigning constant values to line-height or height`?

Живая демонстрация доступна здесь: 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 size to stay intact */
.contain {
    background-size: contain;   
}

Ответы

Ответ 2

Я не думаю, что это возможно только с помощью CSS, потому что фоновые изображения не влияют на высоту их содержащего элемента. Вам нужно будет определить размер фонового изображения, и для этого потребуется javascript. Обнаружение ширины и высоты элемента в Javascript предполагает создание img из фонового изображения.

Вот решение, которое использует Javascript и display: table для достижения желаемого результата:

Рабочий пример: 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);

});

Я основал свой ответ на следующем источнике Как получить размер фонового изображения в jQuery?

Ответ 3

Используя background css to center фоновое изображение, вы всегда будете центрироваться. Проблема заключается в выравнивании текста до середины элемента управления.

Рассматривали ли вы использование единиц em для указания высоты строки? Вам нужно будет указать какую-то высоту, чтобы позволить вертикальному центру иметь место.

В качестве альтернативы, если вы не хотите использовать em, вы можете попробовать display:table-cell css.

Отметьте http://cssdesk.com/3ZXrH - для двух приведенных выше примеров. Я добавил height:10em;, чтобы лучше продемонстрировать, что происходит.