Как вертикально выровнять встроенное изображение со встроенным текстом, следующим за ним? - PullRequest
Новая
       2

Как вертикально выровнять встроенное изображение со встроенным текстом, следующим за ним?

1 голос
/ 11 июня 2010

Есть ли способ вертикально выровнять элемент изображения, созданный свойством «content» как часть селектора «: before», рядом с соседним встроенным текстом?Другими словами, у меня есть 

<a href="..." class="facebook">Share on Facebook</a>

Поскольку я не хочу загрязнять свою разметку ненужными элементами IMG, которые связаны только со стилем, я прибегаю к добавлению небольшого значка слева от ссылки.через CSS (за исключением того, что он не выравнивается должным образом, отсюда и вопрос): 

a.facebook:before
{
     content: url(/style/facebook-logo.png);
}

Я попытался добавить «vertical-align: middle» (одну из самых известных концепций выравнивания, чтобы понять в CSSНа мой взгляд, это та самая собственность) но это никак не сказывается.Логотип совпадает с базовой линией текста, и я не хочу жестко кодировать смещения пикселей, потому что, откровенно говоря, размер текста отличается от браузера к браузеру и т. Д. Есть ли какое-либо решение для этого?

Ответы [ 4 ]

0 голосов
/ 11 июня 2010

Высота строки и фоновое изображение получат то, что вы хотите:

CSS: 

a.share-on-facebook {
    background: url(facebook.png) no-repeat top left;
    line-height: 40px; /* height of facebook logo */
    padding-left: 40px; /* width of Facebook logo */
}

Наценка: 

<a class="share-on-facebook" href="...">Share on Facebook</a>
0 голосов
/ 11 июня 2010

Вертикальное выравнивание относится только к элементам ячейки таблицы.Вы можете добавить отображение: table-cell в "a.facebook"

0 голосов
/ 11 июня 2010

Я бы добавил несколько прозрачных пикселей над (или под) логотипом, это проще всего сделать с изображениями.

В противном случае вы можете играть с line-height, ноЯ желаю вам удачи, чтобы ясно понять, что вы делаете ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Aligning generated content vertically</title>
    <style type="text/css" media="screen,projection">

a, a:before {
    /*display: inline-block;*/
}

a {
    vertical-align: super;
    line-height: 3;
    background-color: yellow;
    border-top: 1px solid darkred;
    border-bottom: 1px solid red;
}

a:before {
    vertical-align: bottom;
    line-height: 1;
    content: 'bottom  :';
}
    </style>
</head>
<body>
    <div>
        <p><a href="#">Share sth with people you didn't think they'd have access to it</a></p>
    </div>
</body>
</html>

Вы можете раскомментировать display: inline-block; тоже

0 голосов
/ 11 июня 2010

Лично вместо этого я бы использовал background-image:

HTML: 

<a href="..." class="facebook">Share on Facebook</a>

CSS: 

a.facebook
{
    background-image: url(/style/facebook-logo.png);
    background-position: TOP LEFT;
    background-repeat:NO-REPEAT;
    padding-left:20px; /* or whatever the width of facebook-logo.png is */
}

Если вы действительно женаты на идее использования :before, тогда вы можете использовать позиционирование: 

a.facebook
{
    position:relative;
    top:0px;
    left:0px;
    padding-left:20px; /* or whatever the width of facebook-logo.png is */
}
a.facebook:before
{
   content: url(/style/facebook-logo.png);
   position:absolute;
   top:0px;
   left:0px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...