Kategorie: Frontend: HTML5, CSS3, jQuery

Ich saß heute am neuen Layout und wollte die Bilder, die in den Artikeln auftauchen, mittig ausrichten. Ausnahmen sind Bilder mit den Klassen .alignleft und .alignright.

Gut, dachte ich mir, versuchste es mal mit text-align: center; aber Pustekuchen. Nach ein wenig Recherche schien mir die einzig brauchbare Möglichkeit zu sein, den entsprechenden Bildern ein neues Elternelement zu verpassen, beispielsweise ein <div> oder ein <span> und dessen Inhalt (also auch das Bild) zentriert darzustellen. Da ich 1.) nicht in den Textpattern-Dateien rumwuseln wollte und 2.) das Extra-Markup nicht ins HTML gehört, hab ich mich für die JavaScript-Methode entschieden und dabei jQuery ausprobiert.

Meine Erfahrungen mit JavaScript (oder ECMAScript) sind seit jeher gering, da ich es bisher nicht gebraucht habe und ich immer an Icons die den Mauszeiger verfolgen und sonstige Spielereien denken musste, die ich schon immer fragwürdig hielt.

Der jQuery-Code, den ich dafür nutze, sieht folgendermaßen aus:

$(document).ready(function(){
$(".entry-content img[class!=alignleft][class!=alignright]").wrap("<span class=\"imgbox\"></span>");
});

Es macht nichts anderes als nach dem Laden des Dokuments allen Bildern, die in einem Element mit der Klasse .entry-content enthalten sind, ein <span>-Element mit der Klasse .imgbox drumherum zu verpassen. Eine Ausnahme bilden wie schon gesagt Bilder mit den den Klassen .alignright/left, die bekommen kein <span>.
(.entry-content stammt übrigens aus dem hAtom-Mikroformat, über das ich schon mal geschrieben habe.)

In HTML übersetzt (vereinfacht:

<img src="bildname.jpg" />

wird zu

<span class="imgbox"><img src="bildname.jpg" /></a>

Das CSS sieht so aus:

.imgbox {
text-align: center;
display: block;
}

.entry-content img {
border: 1px solid #CACACA;
background: #FFF;
padding: 5px 5px 5px 5px;
text-align: center;
}

Das <span>-Element wird zu einem Block-Element und bekommt dadurch die komplette Breite des .entry-content. Mittels text-align: center; wird jeglicher Inhalt in dieser Box zentriert, so auch das enthaltende Bild. Dieses besitzt noch die ganzen anderen Standard-Formatierungen erhält wie einen Rahmen, Hintergrundfarbe und einen Innenabstand. Und so sieht das dann aus: