Центрирование CSS background-image с предыдущими элементами? - PullRequest
Новая
       38

Центрирование CSS background-image с предыдущими элементами?

0 голосов
/ 02 ноября 2010

http://jsfiddle.net/ksHuz/

Я пытаюсь использовать фоновое изображение с элементом <a> в этой скрипке, но только центр изображения выравнивается с текстом в IE. Как выровнять изображение по центру во всех браузерах?

HTML: 

<table>
    <tr>
        <td>
           <select>
               <option>1</option>
                              <option>33</option>
                              <option>c</option>
                              <option>a</option>
                              <option>aaef</option>
            </select> 
            text
            <a href="#"></a>
        </td>
    </tr>
</table>

CSS: 

a{
 background-image: url(http://stefankendall.com/files/excel.png);   
    width: 16px;
    height: 16px;
    display: inline-block;
}

Ответы [ 2 ]

2 голосов
/ 03 ноября 2010

Добавление vertical-align: middle; к CSS для элемента привязки будет центрировать его для браузеров, основанных на стандартах.Возможно, вам придется воспользоваться каким-то хаком, подобным приведенному на этой странице, чтобы заставить его работать в IE6 и IE7: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Редактировать: Если подумать, возможно, вам следует использоватьреальное изображение, в этом случае вы можете использовать a img { vertical-align: middle; } для того же эффекта (и оно должно работать в кросс-браузерном режиме, так как img уже встроенный блок).Фоновые изображения в идеале должны использоваться только для украшения, а кнопка является актуальным содержимым.Например, что если у кого-то не включен css?Теги изображений позволяют alt атрибуты, также для доступности.

0 голосов
/ 03 ноября 2010

Я думаю, вам нужно переосмыслить подход.Ваше фоновое изображение хорошо отрисовывается внутри <a>, но этот элемент отделен от текста внутри <td>.

В зависимости от того, чего именно вы пытаетесь достичь, вы можете поместить текст и ссылку внутри<span> например, или поместите текст внутри <a> и стилизуйте его так, чтобы он не выглядел как ссылка.Вы также можете расположить их друг над другом с помощью позиционирования и / или поплавков.

...