CODEWITHSUNDEEP
csswordpresscaption
Cristol.GdM
Cristol.GdM

Reputation: 534

Caption uncentering its image

I have a problem that might be a simple one, but can't find a solution.

I am managing my self-hosted wordpress, and am often adding pictures to articles I post, and like to have them centered. However, I noticed that when adding a caption to the centered pictures, they ended up aligned left. You can see an example here (first and second pictures).

The "no caption & aligned" picture code is:

<p style="text-align: center;">
    <a rel="attachment wp-att-1949" href="http://themikal.com/?attachment_id=1949">
        <img class=" size-large wp-image-1949 aligncenter" title="hildolfr1" src="http://themikal.com/wp-content/uploads/2011/05/hildolfr1-566x400.jpg"alt="" width="391" height="276" />
    </a>
</p>

Whereas the "caption and disaligned" picture code would be:

[caption id="attachment_1949" align="aligncenter" width="391" caption="Hildolfr"]
    <a rel="attachment wp-att-1949" href="http://themikal.com/?attachment_id=1949">
        <img class=" size-large wp-image-1949 aligncenter  " title="hildolfr1" src="http://themikal.com/wp-content/uploads/2011/05/hildolfr1-566x400.jpg" alt="" width="391" height="276" />
    </a>
[/caption]

I tried adding <p style="text-align: center;"></p> to the captioned picture code, either outside the caption brackets or inside, but without results.

Would someone have an idea about why it reacts like that? wordpress.stackexchange decided it was a css-related issue, and so was more relevant here.

I am a total beginner regarding CSS, and am using a predesigned code that I then heavily modified. But I can give more info about some info in the CSS if someone points where it is located.

Thanks a lot!

Upvotes: 1

Views: 226

Answers (1)

Cristol.GdM
Cristol.GdM

Reputation: 534

As embarassing as it is, I fixed the problem a few minutes before asking the question without realizing it.

The CSS was missing the following lines:

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}

So it was not able to understand what img class = aligncenter could mean. Adding the lines back fixed the problem.

Upvotes: 1

Related Questions