Why won't (center) changes in WP visual editor save correctly? WordPress
- SOLVED
I'm helping a family member with their blog and she's trying to get a photo that is included in a post to center.
I tried adding a text-align tag or an old fashioned center tag above and below the photo, but it still gets left aligned.
Any ideas why this is happening?
Here's a handy dandy video screencast to show what I mean:
[[LINK href="http://screencast.com/t/xmwuLV2O"]]http://screencast.com/t/xmwuLV2O[[/LINK]]
Answers (4)
Ashfame answers:
Most probably its because of some CSS missing from the theme. Can I take a look at the URL of the site?
Rodney Blackwell comments:
The website is at theblockishaute.com, but I'm using a "coming soon" type plugin, so the actual post content doesn't show to non-logged in visitors.
The theme stylesheet is at
themes/royalle/style.css
Ashfame comments:
As Lew has stated, try putting the required CSS in your theme to make things work.
Add the following styles at the end of your style.css (Taken from: http://codex.wordpress.org/CSS)
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
background-color: #f3f3f3;
border: 1px solid #ddd;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* optional rounded corners for browsers that support it */
margin: 10px;
padding-top: 4px;
text-align: center;
}
.wp-caption img {
border: 0 none;
margin: 0;
padding: 0;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
Lew Ayotte answers:
Add this to your style.css, see if it fixes it:
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
background-color: #f3f3f3;
border: 1px solid #ddd;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* optional rounded corners for browsers that support it */
margin: 10px;
padding-top: 4px;
text-align: center;
}
.wp-caption img {
border: 0 none;
margin: 0;
padding: 0;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
From http://codex.wordpress.org/CSS
Rodney Blackwell comments:
Thank you, this worked perfectly (I used just the top part about centering :)
Dan | gteh answers:
I can likely fix that but can I see the page that it is happening on in my browser?
I checked the site but you have a placeholder page up there right now.
Thanks.
Buzu B answers:
There are actually many reasons why that could be happening. For example, it could be a CSS problem. This might sound strange, but the WYSIWYG editor in wordpress (tinyMCE) won't always represent the real looks of the text when displayed in the blog. Why is that? CSS.
TinyMCE uses a set of style rules which can be overwritten by your theme's CSS. One way to fix this would be to include the theme's CSS in the admin area of wordpress and specify that it should be used for the tinyMCE editor. This is more a tip for theme developers, but I hope it can help you understand why you might have that problem.
There are some other reasons why this might be happening, but I won't go into much detail about that.
<strong>How to solve this problem?</strong>
I'd suggest that you try this:
<p style="text-align:center">your image goes here.</p>
Most of the time that does the trick.