К сожалению, ни один из этих ответов не является доказательством пули, и каждый из них имеет один большой недостаток.
@rossipedia Я использовал для реализации всех своих значков таким образом, и это работает очень хорошо. Но, и это большое, но это не работает с спрайтами, так как вы используете свойство background-position для размещения значка внутри контейнера, который включает ваш текст. И не использовать спрайты, где вы можете плохо для производительности и SEO, что делает их обязательными для любого хорошего современного веб-сайта.
@Jamie Wong Первое решение имеет два недостатка разметки. Использование элементов семантически правильно недооценивается некоторыми, но вы увидите преимущества в определении приоритетов в своем ранжировании в поисковых системах. Поэтому, прежде всего, вы не должны использовать p-тег, когда контент не является абзацем. Вместо этого используйте span. Во-вторых, img-tag предназначен только для только. В очень конкретных случаях вам, возможно, придется игнорировать это правило, но это не один из них.
Я не буду врать вам, я проверил много мест в свое время и ИМХО, нет оптимального решения. Эти два решения являются те, которые приходят ближе к тому, что, хотя:
Инлайн-Block Solution
HTML:
<div class="container">
<div class="icon"></div>
<span class="content">Hello</span>
</div>
CSS:
.container {
margin-top: 50px;
}
.container .icon {
height: 30px;
width: 30px;
background: #000;
display: inline-block;
vertical-align: middle;
}
.container .content {
display: inline-block;
vertical-align: middle;
}
"дисплей: встроенный блок;" это прекрасная вещь. Вы можете сделать так много с этим, и он играет очень красиво с отзывчивым дизайном. Но это зависит от вашего клиента. Inline-Block не работает с IE6, IE7 и все еще вызывает проблемы с IE8. Я лично больше не поддерживаю IE6 и 7, но IE8 все еще там. Если вашему клиенту действительно нужен его сайт для использования в IE8, встроенный блок, к сожалению, не является вариантом. Оцените это первым. Замените черный фон элемента значка своим спрайтом, расположите его, не бросайте туда-сюда и вуаля, вот оно. О, да, и в качестве плюса вы можете выровнять текст так, как хотите, с вертикальным выравниванием.
P.S .: Я знаю, что там есть пустой тег HTML, если у кого-то есть предложение о том, как его заполнить, я был бы благодарен.
Fixed Height Решение
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
.container {
margin-top: 50px;
border: 1px solid #000;
}
.container .icon {
height: 30px;
width: 30px;
background: #000;
float:left;
}
.container .content {
line-height: 30px;
float: left;
display: block;
}
Я ненавижу это. Он использует фиксированную высоту строки для текста, и если вы выберете ту же высоту, что и поле «Значок», текст будет центрирован до этой высоты. Чтобы выровнять текст вверху, отрежьте высоту линии, а внизу, вам нужно будет исправить это с положением: абсолютным и фиксированной шириной и высотой для контейнера. Я не собираюсь вникать в это, если кто-то не попросит об этом, потому что это целая проблема для себя и приносит с собой множество недостатков. Основным недостатком этого пути является фиксированная высота. Исправленные высоты всегда негибкие и особенно с текстом, это может вызвать множество проблем (вы больше не можете масштабировать текст как пользователь без его обрезания, а другие браузеры визуализируют текст по-разному). Поэтому не забудьте, что в браузере текст отключен и что у него есть какая-то маховая комната внутри его высоты линии. P.S .: Не забывайте clearfix для контейнера. И, конечно же, замените черный фон вашим спрайтом и положением + no-repeat.
Заключение
Используйте встроенный блок, если это вообще возможно. ;) Если это не так, глубоко вдохните и попробуйте второе решение.
+1 Это то, что я использую, с вариациями. Это единственный способ получить изображения в соответствии с исходной базой текста во всех браузерах. – Robusto
Спасибо, см. Правки для моих комментариев. – badnaam
Если вы пливите свои значки фона, а текст будет справа, вы должны пометить свои значки вертикально, а не горизонтально. – rossipedia