bild zentrieren

[Tobias]

Ansich ja kein Problem
einfach um das bild ein div algin=center tag rumgelgegt aber dies ist nicht valide

Was wäre eine valide Möglichkeit.

Ps.
<center> ist auch nicht valide

 

[Gimli]

Schreib:

<div style="width:%deinebreite%px; height:%deinehöhe%px; margin:0px auto;">
<img>
</div>

 

[prm]

Geht auch einfacher und ohne zusätzlichen Div (ganz nach dem Geschmack von Efchen): Das Bild mit "display: block;" zum Blockelement verwandeln und mit "text-align: center;" zentrieren:

<img style="display: block; text-align: center;" src="deinbild.jpg" width="" height="" border="0" alt="Bildtext">

Noch besser: eine Klasse verwenden, dann muss man das nicht immer neu schreiben:

CSS:

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

HTML:

<img class="imgzentirert" src="deinbild.jpg" width="" height="" border="0" alt="Bildtext">

 

[neuroleptika]

Geht auch einfacher und ohne zusätzlichen Div (ganz nach dem Geschmack von Efchen): Das Bild mit "display: block;" zum Blockelement verwandeln und mit "text-align: center;"

Das geht nicht.
Mit text-align: center kann man den Inhalt von Blockelementen zentrieren.
Img erzeugt mit display: block; wie andere Blockboxen einen Zeilenumbruch, ist aber weiterhin nur so Breit wie der Inhalt.
Wenn du die Breite mit width veränderst wird der inhalt von img (src="bild.jpg") gestreckt bzw. gestaucht.
Um ein weiteres Element kommt man also nicht rum:
html

<p>
<span class="imgzentriert">
<img src="bild.jpg" width="300" height="100" alt="Bildtext">
</span>
Linksbündiger Text
</p>

css:

  .imgzentriert {
display: block;
width:100%;
text-align: center;
}

Natürlich könnte man auch <p> text-align: center geben und den Nachfolgenden Text in ein anderes Element schreiben.
In irgendeinem Element steht <img> ja immer.

 

[prm]

Stimmt, neuroleptika.
Hatte es mir nur im IE angesehen und da hat's geklappt.

Kleiner Verbesserungsvorschlag zu deinem Code:
Auf das span kann man noch verzichten:

<p class="imgzentriert">
<img src="bild.jpg" width="300" height="100" alt="Bildtext">
</p>

Und als CSS reicht - du hattest es bereits angedeutet:

 .imgzentriert {

text-align: center;
}

 

[neuroleptika]

...
Auf das span kann man noch verzichten:

<p class="imgzentriert">
<img src="bild.jpg" width="300" height="100" alt="Bildtext">
</p>

Ja, das meinte ich mit ich auch mit meinem letzten Satz.
Aber meistens besteht ein Absatz ja auch aus Text. Wenn der ganze Inhalt von <p> zentriert werden soll ist das natürlich richtig.

Deine Idee währe ja bei den normalen inline-Elementen nicht verkehrt. Nur <img> ist da etwas besonderes.
Ohne display: block verhält es sich auch nicht wie normale inline-Elemente.
Es drückt die Zeilen durch sein height und padding auseinander. Das machen normale inline-Elemente nicht.
Deswegen wird <img> auch manchmal als Inline-Block-Element bezeichnet.

(Nur im IE lassen sich ganze Blockelemente mit text-align:center; zentrieren.)

 

[threadi]

Klappt auch im IE ab Version 6:

.imgzentriert {
 display: block;
 margin: 0px auto;
 width: 100px;
}

(Breite natürlich jeweils anpassen ...)

 

[prm]

Das klappt threadi.
Allerdings ist es m.E. eine unflexible Lösung, wenn man je nach Bildgröße den width-Wert immer neu anpassen muss.

 

[threadi]

Ist doch wie gesagt kein Problem.

<img src="bild.jpg" alt="" class="imgzentriert" style="width: 200px;" />

 

[neuroleptika]

hm, width sollte eigentlich schon als html-Attribut vorhanden sein.

<img  class="bild" src="bild.jpg" alt="Bildtext" width="300" height="100" class="bild" />

.bild {
display: block;
margin: 0 auto;
}

IE5 und 5.5 können mit margin: auto; noch nichts anfangen.
Diesen Dingern könnte man die Variante von prm vorsetzen.

Die Variante mit text-align: center; verstehtehen auch die IE5.x. Ein geeignetes Tag ist oft schon vorhanden.