# Icon immer mittig zum Element ausrichten



## Dustin84 (4. März 2012)

Hallo,

ich teste gerade ein wenig mit Icons herum. 

*Hier mal meine Styles:*

```
body {
    font-size: 13px;
    line-height: 1.4;
}
```



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


```
/* ======================================================
   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:*

```
<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?


----------



## threadi (4. März 2012)

Versuchs mal mit


```
.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:


```
.ico-star {
	background-image: url(../img/icons-16px.png);
        background-repeat: no-repeat;
        background-position: 0 50%;
}
```


----------



## djheke (4. März 2012)

background-position:center center;


----------



## Dustin84 (5. März 2012)

Hallo,

nein, das funktioniet alles nicht 

Schließlich kann das Sprite ja auch so aussehen:
http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/sprite.png

Da wirds schwierig mit center center oder top:50%.

Muss man wohl doch extra CSS für jeder Schriftgröße machen...


----------



## djheke (5. März 2012)

Na, dass du sprite benutzt, hättest du ruhig sagen können:
Probier mal so:

```
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 ;
 
}
```


```
<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.

```
<!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


----------

