выровняйте значки с текстом
Что лучший способ состоит в том, чтобы выровнять значки (слева) и текст (справа) или противоположный текст на левом и значок на праве?
Значок отображает, и текст должен быть тот же размер? Идеально я хотел бы, чтобы они отличались, но были на том же выравнивании по вертикали.
Я использую позиционное фоном свойство CSS для получения значков от увеличенного изображения.
Вот то, как я делаю это теперь, но я борюсь или с заставляю их быть на той же строке или быть вертикально выровненные к нижней части.
Текст
Это - то, что я получаю после того, как я пробую Ваши предложения.
Хотя текст теперь выровненный значка, он накладывается на значок направо от значка, который я хочу. Обратите внимание на то, что я использую фоновое положение для показа значка от большего набора изображений.
В основном я добираюсь
<icon><10px><text_and_unwanted_icon_to_the_right_under_it>
<span class="group3_drops_icon group3_l_icon" style="">50</span>
group3_drops_icon {
background-position:-50px -111px;
}
.group3_l_icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/group3.png) no-repeat scroll left center;
height:35px;
overflow:hidden;
padding-left:55px;
}
2 ответа
Я обычно использую background:
<style type="text/css">
.icon {
background-image: url(path/to/my/icon.jpg);
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
}
</style>
<span class="icon">Some text here</span>
Вы можете сделать это на одной линии, используя vertical-align и line-height
<p style='line-height: 30px'>
<img src='icon.gif' style='vertical-align: middle' />Icon Text
</p>
Альтернативно, вы можете использовать фоновый подход с no-repeat и позиционированием:
span.icontext {
background: transparent url(icon.gif) no-repeat inherit left center;
padding-left: 10px /* at least the width of the icon */
}
<span class="icontext">
Icon Text
</span>