netzphilosophieren curiosity . development . life

Bilder automatisch zentrieren lassen? Bis vor kurzem habe ich mir nur mit einem zusätzlichen Absatz helfen können. Bis ich auf einer Seite (leider weiß ich nicht mehr wo), die wunderbare Eigenschaft auto für Ränder (margin) entdeckt habe. Mit Hilfe dieser Eigenschaft, kann man beliebige 'Block'-Elemente zentrieren.

Was sind Block-Elemente?
Was bedeutet das jetzt? 'Block'-Elemente sind z.B. Layer oder Absätze. Sie sind abgeschlossen und nach ihnen wird automatisch die Zeile umgebrochen. Für genauere Beschreibungen verweise ich einfach mal auf einschlägige Literatur und begnünge mich mit Beispielen: <div>,<p> und <ul> oder <ol> sind 'Block'-Elemente, während z.B. <b>,<i> oder besser <strong>,<em> oder aber auch <img>-Elemente es nicht sind. Sie sind 'inline', das heißt, hinter ihnen geht es ganz normal, ohne einen Textumbruch, weiter.

Nun bietet CSS die Möglichkeiten, Elementen eine Anzeige-Eigenschaft (z.B. block oder inline) zuzuweisen. Dies geschieht mit der Angabe:display:block; bzw.display:inline;

Automatisches Zentrieren der Bilder via CSS
Für das automatisch zentrierte Bild, muss man dem <img>-Tag die Anzeigart block zuweisen, zentriert wird danach mit margin:auto:.storycontent img {
display:block;
margin-left:auto;
margin-right:auto;
}
.storycontent  habe ich vor img gesetzt, da ich nur die Bilder innerhalb meines Postings ansprechen möchte. Und  das Posting befindet sich in einer Box der Klasse .stroycontent. Mit obrigem Code wirkt die CSS-Definition nur auf alle Bilder innerhalb dieser Boxen.

Jetzt kann man das Bild beliebig formatieren. Z.B. einen Bilderrahmen darum setzten. Hierfür benötigt man einen inneren Randabstand (padding), und einen Rahmen (border) und kann z.B. auch noch die Hintergrundfarbe (background) ändern.

Beispielcode
Ein Beispiel für solch einen Code ist: .storycontent img {
display:block;
margin:2px auto;
padding:4px;
border:1px dotted blue;
background: white;
}

Nachtrag:
Diese Art zu zentrieren funktioniert natürlich auch mit jedem anderen Blockelement. Somit ist es z.B. die einfachste Möglichkeit, eine komplette Seite mit fester Breite, im Browser-Fenster zu zentrieren (Im Template Lavender habe ich noch meine alte und wesentlich umständlichere Methode verwendet, so als Vergleich ;)).