WordPress.org

Ready to get started?Download WordPress

Forums

PB Responsive Images
[resolved] centered images (2 posts)

  1. f.macdonald
    Member
    Posted 8 months ago #

    Hello,

    I see the plugin adds the class "aligncenter" to the span containing the image variations when it is center aligned in the wp-admin editor. As the span doesn't have a defined width and is wrapped in an A tag i don't believe it is possible to center align the image with CSS. Any ideas on how i can achieve this?

    http://wordpress.org/plugins/pb-responsive-images/

  2. Jacob Dunn
    Member
    Plugin Author

    Posted 8 months ago #

    Sure - this becomes a CSS issue, and can be solved by a few quick corrections. If you look at the styles in the twentytwelve theme as an example, they have the following styles for images:

    /* Images */
    .alignleft {
    	float: left;
    }
    .alignright {
    	float: right;
    }
    .aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }

    To apply those styles to images contained within those selectors, you just have to refactor them slightly:

    /* Images */
    .alignleft,
    .alignleft img{
    	float: left;
    }
    .alignright,
    .alignright img{
    	float: right;
    }
    .aligncenter,
    .aligncenter img{
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }

    I kept the previous selectors in there as well, as it causes no issues to keep the backwards compatibility in this instance, just in case.

    Hope that helps!
    Jake

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.