Ausrichtung von Transparenten Symbolen mit Hover Effekt

html.de-Forum HTML, XHTML & CSS
1

Hi,
ich hab ein Problem mit zwei Symbolen die ich nachbauen wollte. Ich habe die Logos Freigestellt, die Transparenz ist auch OK denk ich.
Sie sind verzogen. Ich bekomm die Schrift einfach nicht in die Mitte. Kann mir jemand sagen wo der Fehler liegt?

Quelltext
[HTML]










[/HTML]

CSS

[CODE].iTunes {
background-color: #737373;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
border-radius: 5px;
float: left;
}
.iTunes:hover {
background-color: #151515;
}
.iTunes_small {
background-color: #737373;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
height: 35%;
width: 100px;
border-radius: 5px;
float: left;
}
.iTunes_small:hover {
background-color: #151515;
}

.amazon {
background-color: #FFFFFF;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
height: 50%;
width: 200px;
border-radius: 5px;
float: left;
}
.amazon:hover {
background-color: #DBDADA;
}
.amazon_small {
background-color: #FFFFFF;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
height: 35%;
width: 100px;
border-radius: 5px;
float: left;
}
.amazon_small:hover {
background-color: #DBDADA;
}

.Google {
background-color: #737373;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
height: 70%;
width: 200px;
border-radius: 5px;
float: left;
}
.Google:hover {
background-color: #151515;
}[/CODE]

Die Symbole sollen nebeneinander (sind sie) auf einer horizontalen Linie liegen und alle gleich hoch sein.

Danke für eure Hilfe

PPPPPSSSSS: ERLEDIGT

2

versuch es mal so
[html]

Wölfe der Nacht #wrapper { background:#aaa; } .iTunes { display:inline-block; vertical-align:middle; width: 100px; } .amazon { display:inline-block; vertical-align:middle; width: 200px; } .Google { display:inline-block; vertical-align:middle; width: 200px; } #wrapper .iTunes img { width:100px; } #wrapper .amazon img { width:150px; } #wrapper .Google img { width:200px; }

[/html]