Twitch? & Icons zentrieren

CSS muss man sich wie ein Paket vorstellen wo mehrere kleine Päckchen drin sind. Die kleinen Päckchen können Bereich <div></div>, Links <a></a> oder z.B. Bilder <img></img> sein.

Wenn man sich z.B. diesen Code anschaut

<div>	<a href="https://google.de">Google</a>	<a href="https://gmx.de">Gmx</a>	<a href="https://Woltlab.de">Woltlab</a></div>

...dann sind in dem Paket (Bereich) 3 Päckchen (Links) drin.
Wenn man nun die Hintergrundfarbe von dem Bereich Ändern will würde man das so im CSS schreiben.

div {	background-color: red;}

Wenn man die Farbe aller Links ändern will dann

div {	a {		color: blue;	}}

oder

div > a {	color: blue;}

Mann arbeitet sich also von außen nach innen.

Wenn man nun nicht alle Links ändern will, sondern nur die ersten beiden, dann benutzt man Klassen (für mehrere Elemente). Wenn man nur einen Link (z.B. den 3.) ändern will benutzt man ID`s (für ein einzelnes Element). ID`s (#) und Klassen (.) kann man auch direkt ansprechen.

Ändert man nun den HTML-Code so ab:

<div>	<a class="abc" href="https://google.de">Google</a>	<a class="abc" href="https://gmx.de">Gmx</a>	<a id="123" href="https://Woltlab.de">Woltlab</a></div>

wäre der CSS-Code nun:

div {	.abc {		color: red;	}	#123 {		color: blue;	}}

oder

div > .abc {	color: red;}div > #123 {	color: blue;}

oder direkt:

.abc {	color: red;}#123 {	color: blue;}

oder direkt aber geknüpft an den Link falls die klasse auch bei z.B. einem Bild verwendet wird.

a.abc {	color: red;}

Wie du siehst gibt es verschiedene Varianten. Je genauer du den Weg zu einem Element hin definierst, desto genauer triffst du es auch. Gerade wenn die Klasse mehrfach verwendet wird, kannst du die Auswahl eingrenzen.

Bezogen auf mein Plugin ist mein html-Code ohne Schnick-Schnack dieser:

<fieldset class="dashboardBox">	<legend></legend>	<div>		<ul class="sidebarBoxList">			<li class="socialnetworks">				<a>					<span></span>				</a>				<a>					<span></span>				</a>				<a>					<span></span>				</a>				<a>					<span></span>				</a>				....			</li>		</ul>	</div></fieldset>

Ich hab hier dem Element <li> eine Klasse gegeben. Das reicht hier für mich aus. Wenn ich irgendwann man eine Box für den Content-Bereich mache würde dort das <li> die gleiche Klasse kriegen und es sieht überall gleich aus...Aber auch hier könnte man es anders machen.

mein CSS-Code sieht wie folgt aus:

li.socialnetworks {	margin-left: -5px;}.socialnetworks {	float: left;	.icon {		font-size: 40px;	}	a {  		display: inline-block;		margin-left: 5px;		margin-bottom: 5px;	}}

Für deinen Fall müsst man das float: left weg bekommen und zentrieren.

li.socialnetworks {
	text-align: center;
	float: none;
}

Sprich alle innerhalb der Klasse .socialnetworks werden nicht mehr gefloated und mittels text-align: center; zentriert.