Icon immer mittig zum Element ausrichten

D

Dustin84

Erfahrenes Mitglied
Hallo,

ich teste gerade ein wenig mit Icons herum.

Hier mal meine Styles:
HTML: 
body {
    font-size: 13px;
    line-height: 1.4;
}


HTML: 
h2 {
    font-size: 1.75em;
    line-height: 1.5em;
    margin: 0;
}

HTML: 
/* ======================================================
   Icons 16px
   ====================================================== */
.ico-star { position:relative; padding-left:16px; }
.ico-star:before {
	position: absolute;
	clip: rect(0, 16px, 16px, 0);
	content: url(../img/icons-16px.png);
	left: 0;
	top: 0;	
}

Markup:
HTML: 
<h2 class="ico-star">Typografie</h2>

Ist es möglich, das Icon immer mittig zur H2 auszurichten? Egal, ob meine H2 jetzt 1em oder 2.5em groß ist?
 
Versuchs mal mit

Code: 
.ico-star:before {
	position: absolute;
	clip: rect(0, 16px, 16px, 0);
	content: url(../img/icons-16px.png);
	left: 0;
	top: 50%;
        margin-top: -8px;
}

Ansonsten würde ich eher ein Hintergrundbild empfehlen, also:

Code: 
.ico-star {
	background-image: url(../img/icons-16px.png);
        background-repeat: no-repeat;
        background-position: 0 50%;
}
 
Na, dass du sprite benutzt, hättest du ruhig sagen können:
Probier mal so:
Code: 
h2 {
 background:#09c;
 color:#fff;
 font-size:3em;
}


h2 b {
 margin-left:20px;
 display:inline-block;
 vertical-align:middle;
 width:32px;
 height:32px;
 background:url(sprite.png) no-repeat -184px -98px ;
 
}

Code: 
<h2>Willkommen<b></b></h2>

Für das <b> kannst du auch ein <span> Element nehmen. Oder aber das Psuedoelement :after
Achso, habe das ganze offline getestet und es funktioniert wunderbar.

Hier mal das Ganze.
Code: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Sprite</title>
<style type="text/css">
* {
 margin:0;
 padding:0;
}

h2 {
 background:#333;
 color:#fff;
 font-size:7em;
}

h2 b {
 margin-left:20px;
 display:inline-block;
 vertical-align:middle;
 width:100px;
 height:100px;
 background:url(sprite.png) no-repeat 0 -150px ; /*Das Buch aus sprite.png  , Starposition -184px -98px ;*/
}
</style>
</head>
<body>
<h2>Willkommen<b></b></h2>
</body>
</html>

Und hier die Grafik von Dustin84
http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/sprite.png
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück