Eingefügtes Bild lässt sich nicht zentrieren

Hallo,

ich benutze für meinen Blog http://www.rolandrillander.com Wordpress 3.0.1 mit dem Theme 'The Morning After' von Whoo Themes.

Ich habe beim Artikel- und Seitendesign nun das Problem, dass sich eingefügte Bilder nicht zentrieren lassen.

Im WP-Editor werden bei der visuellen Ansicht die Bilder zwar zentriert angezeigt. Im Browser steht das Bild aber wieder links. Außerdem geht der dem Bild nachfolgende Text nicht erst unterhalb des Bildes weiter, sondern steht dann rechts neben dem Bild. Beispiel

Der Code für das Einfügen (und Zentrieren) des Bildes lautet:

<a href="http://rolandrillander.com/wp-content/uploads/2010/10/Drei-Säulen.jpg"><img class="size-medium wp-image-140 aligncenter" title="Säulen der Gesundheit" src="http://rolandrillander.com/wp-content/uploads/2010/10/Drei-Säulen-300x218.jpg" alt="Die Drei Säulen der Gesundheit" width="300" height="218" /></a>

aligncenter ist definiert
Im style.css stehen die image styles folgendermaßen drinnen:

/* image styles */


.aligncenter { display: block; margin: 14px auto; }
.alignleft { float: left; margin: 0 14px 10px 0; }
.alignright { float: right; margin: 0 0 10px 14px; }
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px;  -webkit-border-radius: 3px; border-radius: 3px; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 14px; padding: 5px 4px 5px 5px; margin: 0; }

Ich konnte im Forum für mein Problem leider keine Lösung finden. Eine andere Definition von aligncenter, wie zum Beispiel

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

habe ich schon probiert. Es hat sich leider nichts verändert.

Danke schon mal im Voraus!

Vielen Dank für die rasche Antwort!

Ich (als Anfänger) kenne jetzt die Ursache für das Problem ... aber noch nicht die Lösung.
Werd mich mal 'umlesen' und schaun ob ich irgendwo auf eine Lösung stoße.

Was schlägst du vor? Zeile löschen?

fg

Zitat von spickzettel

Einfach aus

PHP

.aligncenter { display: block; margin: 14px auto; }

PHP

p img.aligncenter { display: block; margin: 14px auto; }

machen.

Das hat leider auch nicht geholfen. Es hat sich nichts verändert.
Ich hab auch

p img.aligncenter {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}

probiert. Auch hierbei keinerlei Veränderung.

Im style.css steht oberhalb der /*image styles*/ folgendes:

/* legacy image caption classes */


.captionleft { float: left; margin: 0 1.5em 1em 0; padding: 0.5em; text-align: left; }
.captionright { float: right; margin: 0 0 1em 1.5em; padding: 0.5em; text-align: left; }
.captionfull { margin: 0 0 1em 0; padding: 0; text-align: left; }
.captionleft img, .captionright img, .captionfull img { margin: 0; display: block; }
.captionleft p, .captionright p, .captionfull p { background: #eee; margin: 0; line-height: 1.6em; padding: 0.5em; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; font-size: 0.9em; color: #555; }

Kann das vielleicht auch etwas mit dem Problem zu tun haben?

Zitat von alchymyth

das 'float:left;' aus dem style von 'p img' in compressed.css beeinflusst das bild immer noch;

versuch's hiermit:

Code

.aligncenter { display: block; margin: 14px auto; float:none; }

Super!
Das hab ich im style.css geändert und das Bild ist jetzt zentriert!

Vielen Dank für die Hilfe!