Why my pictures would not center in my blog.

The pictures I was placing in my blog would not center if they were placed side by side even if I set the paragraph style to centered or set the picture alignment to center.

When Windows Live Writer applies a paragraph style to center it sets the in-line HTML <p> properties to <p align="center">.  Note that Live Writer uses the old (deprecated)  align term rather than the now standard style="text-align: center" format.

In my blog template the CSS properties for <p> was set to text-align: center;

Apparently the align in-line property is overridden by the CSS text-align property and it forces the paragraph to be left justified.

Solution

There are a couple of solutions or work-arounds for this problem.  The best solution would be for Microsoft to make a fix to Live Writer to use the style="text-align: center;" format instead of the align="center" format.

The second solution isn't really convenient but it does seem to work.  You can edit the source HTML code of the blog post and replace the <p align="center"> instances with <p style="text-align:center;">.

The third solution (and the one I'm using) is to examine your blog CSS style sheet and make sure that any CSS rule that would apply the text-align property to the <p> element is removed.  This has the effect of making paragraphs left justified (the default for all browsers that I'm aware of), but still recognize and pay attention to the <p align="center"> property.

Example of Live Writer pictures not centering

Note: Except where noted, paragraph formatting is default, meaning that the paragraph justification will use whatever the blog template defines.   justified.

1. This is the way my pictures looked when I tried to center them. Notice how they are left aligned even though I had set the paragraph format to center. In this case the CSS style rule for <p> was set to text-align:center.

IMAG0264IMAG0265

2. So next I tried setting the picture alignment to center, which obviously did not have the desired effect.  Yes, the pictures were centered, but they were stacked and no longer side by side.

IMAG0264IMAG0265

 

3. Further exploring I set the picture alignment to in-line in Live Writer, and  edited the source code and modified <p> from <p align="center"> to <p style="text-align: center">. Notice that the pictures are now the way I want them… inline and centered side by side.

IMAG0264IMAG0265 

 

4. Finally, I went through the CSS rules and removed any instance where <p> would be set to text-align: center by just deleting (or commenting out) those rules.  Thus the browser defaults would be used.  The results are what I was looking for; text in the body is left justified, and using the center paragraph style my pictures are centered (picture alignment set to in-line in Live Writer, and paragraph format set to <p align="center"> by paragraph center.)

IMAG0264IMAG0265

5.  There is a quirk however.  The quirk is that Live Writer and the WordPress blog editor do not play well together – at least wrt centering paragraphs.  Here's what I found after doing some more investigation; unfortunately I don't have a solution for this behavior.

  1. If the edit/post is done in Live Writer, LW puts an inline <p align="center">.  If I make sure that CSS does not set the text-align anywhere then the page seems to display correctly.
  2. If the edit/post is done in WordPress editor and the paragraph is centered, WP puts an inline <p style="text-align: center">.   This seems to display the page correctly.
  3. The problem comes in if I switch editors.
    1. If the original was done in LW and then the post is subsequently edited in WP, the WP editor strips out all the <p align="center"> inline properties and then all the paragraphs that used to be centered in Live Writer are no longer centered. Note that the align property is totally striped from the <p> tag.
    2. If the original was done in WP editor and then the post is subsequently edited in LW, the LW editor ignores the <p style="text-align: center"> and does not recognize that the paragraph should be centered.  Note that LW does not strip the style=property, but neither does it recognize it.

Tagged with:

Filed under: Tips and TricksWindows Live Writer

Like this post? Subscribe to my RSS feed and get loads more!