Leider ist keine dieser Antworten kugelsicher und jeder hat einen großen Fehler.
@rossipedia Ich verwendete alle meine Symbole auf diese Weise und es funktioniert ganz gut. Aber, und das ist ein großes, aber es funktioniert nicht mit Sprites, da Sie die background-position -Eigenschaft verwenden, um das Symbol innerhalb des Containers zu platzieren, der Ihren Text enthält. Und nicht Sprites verwenden, wo Sie können, ist schlecht für die Leistung und SEO, so dass sie unerlässlich für jede gute moderne Website.
@Jamie Wong Die erste Lösung hat zwei Markup-Fehler. Elemente semantisch korrekt zu verwenden, wird von einigen leider unterschätzt, aber Sie sehen die Vorteile in der Priorisierung von Form in Ihrer Suchmaschinen-Rangliste. Als erstes sollten Sie kein P-Tag verwenden, wenn der Inhalt kein Absatz ist. Verwenden Sie stattdessen span. Zweitens ist der img-Tag für Inhalt nur gemeint. In sehr speziellen Fällen müssen Sie diese Regel möglicherweise ignorieren, aber das gehört nicht dazu.
Meine Lösung: Ich werde dich nicht anlügen, ich habe viele Orte in meiner Zeit eingecheckt und IMHO gibt es keine optimale Lösung. Diese beiden Lösungen sind diejenigen, die am nächsten zu dem kommen, aber:
Inline-Block-Lösung
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;
}
"display: inline-block;" ist eine schöne Sache. Sie können so viel damit machen und es spielt sehr gut mit Responsive Design. Aber es hängt von Ihrem Kunden ab. Inline-Block funktioniert nicht gut mit IE6, IE7 und verursacht immer noch Probleme mit IE8. Ich persönlich unterstütze IE6 und 7 nicht mehr, aber IE8 ist immer noch da draußen. Wenn Ihr Kunde seine Website wirklich benötigt, um in IE8 verwendbar zu sein, ist Inline-Block leider keine Option. Bewerte dies zuerst. Ersetze den schwarzen Hintergrund des Icon-Elements mit deinem Sprite, platziere es, wirf dort keine Wiederholung und voilà, da hast du es. Oh ja, und als ein Plus, können Sie den Text beliebig ausrichten mit vertikal ausrichten.
PS .: Mir ist bewusst, dass dort ein leeres HTML-Tag ist, wenn jemand einen Vorschlag hat, wie man es füllt, wäre ich dankbar.
Feste Höhe Lösung
.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;
}
Ich hasse diese. Es verwendet eine feste Zeilenhöhe für den Text, und wenn Sie die gleiche Höhe wie das Feld des Symbols wählen, wird der Text auf diese Höhe zentriert. Um den Text an der Spitze auszurichten, schneiden Sie die Zeilenhöhe ab, und an der Unterseite müssen Sie das mit Position: absolute und einer festen Breite und Höhe für den Container beheben. Ich werde mich nicht damit befassen, es sei denn jemand bittet darum, weil es ein ganzes Problem für sich selbst ist und viele Nachteile mit sich bringt. Der Hauptnachteil dieses Pfades ist die feste Höhe. Feste Höhen sind immer unflexibel und vor allem bei Text kann es zu einer Reihe von Problemen führen (Sie können den Text nicht mehr als Benutzer skalieren, ohne dass er abgeschnitten wird, und verschiedene Browser rendern Text anders). Stellen Sie also sicher, dass der Text in keinem Browser abgeschnitten ist und dass er innerhalb der Zeilenhöhe etwas Spielraum hat. S.S .: Vergessen Sie nicht den Clearfix für den Container. Und natürlich, ersetzen Sie den schwarzen Hintergrund mit Ihrem Sprite und der entsprechenden Position + keine Wiederholung.
Fazit
Inline-Block verwenden, wenn überhaupt möglich. ;) Wenn es nicht ist, atme tief durch und versuche die zweite Lösung.
+1 Dies ist, was ich benutze, mit Variationen. Nur so können Bilder in allen Browsern in Bezug auf die Textbasislinie ausgerichtet werden. – Robusto
Danke, bitte lesen Sie die Änderungen für meine Kommentare. – badnaam
Wenn Sie Ihre Hintergrundsymbole kacheln und der Text sich rechts befindet, sollten Sie Ihre Symbole vertikal und nicht horizontal kacheln. – rossipedia