Использование вертикального выравнивания на элементе с background-image - PullRequest
Новая
       7

Использование вертикального выравнивания на элементе с background-image

1 голос
/ 11 мая 2010 
<style type='text/css'>
#span1{
background-image:url("http://www.reoiv.com/images/rss.jpg");
background-repeat:no-repeat;
cursor:pointer;
display:block;
float:left;
height:15px;
width:15px;
vertical-align:text-bottom;
}
</style>

<span id='span1'></span>觀看次數

То, что я хотел бы сделать, это добиться вертикального выравнивания: эффект «текст снизу», но я не делаю это для элемента изображения. Я делаю это на элементе с набором фонового изображения. Если вы вставите вышеуказанные коды здесь: http://htmledit.squarefree.com/

Вы увидите, что текст не выровнен по вертикали по низу.

Я хотел бы знать, как это можно сделать без добавления дополнительного HTML-элемента, если это возможно.

Большое спасибо всем вам.

Ответы [ 3 ]

4 голосов
/ 11 мая 2010

Вы закрыли тег span перед текстом: 

<span id='span1'></span>觀看次數

Используйте это: 

<span id='span1'>觀看次數</span>

Надеюсь, это поможет.

2 голосов
/ 11 мая 2010

Вы не можете сделать это с помощью поплавков. Вы можете попробовать использовать display: inline-block, но поддержка браузера отрывочна.

РЕДАКТИРОВАТЬ: http://www.quirksmode.org/css/display.html

1 голос
/ 11 мая 2010

Вы не можете получить идеальный результат в пикселях. Вот работа, которую я использовал: 

<span style="background: url(http://www.reoiv.com/images/rss.jpg) no-repeat left center; padding-left: 20px;">觀看次數</span>

Это вертикально выравнивает значок по центру с текстом. padding-left прекрасно работает со встроенными элементами.

...