WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Unable to centre images (7 posts)

  1. Skestrich
    Member
    Posted 2 years ago #

    I have the same problem that many other members seemed to have had for some time, and like them I cannot find a solution that works for me! In posts and pages, I cannot centre images I upload, even if text and other items are centred. The image editor displays the images as centred (after selecting centre alignment) but back on the post or page, and certainly on a browser, it remains left aligned.

    If someone can help it would greatly appreciated!! I know the problem lies in the css file, but I am unsure of the what coding is required.

    Please check out this page as an example from my site: http://www.bushlab.com.au/lab/learning-path/

    I use the Amplfy theme.

    Looking forward to some help to get this resolved at last.

  2. stepquick
    Member
    Posted 2 years ago #

    .aligncenter{
    margin:0 auto;}

    Add this somewhere in your css, that should help

  3. wrexsti
    Member
    Posted 2 years ago #

    could you wrap it in a div when you post it in ur post editor
    <div style="text-align: center;"><img src="http://www.bushlab.com.au/lab/wp-content/uploads/2011/07/Learningpath1.png></div>

    idk tbh, im a noob.

  4. stepquick
    Member
    Posted 2 years ago #

    text-align isn't actually designed for images, some browsers work with it, but it shouldn't be relied on as a solution.

    If you click aligncenter on the image editor for wordpress it appends an aligncenter to your image. All you need to do then is either two choices: Go to your theme's css file under the appearance editor and add the previous aligncenter class i mentioned. that way it will do it for all images you ask to align via centering.

    Or you can try adding the style directly to the image tag. <img src="http://www.bushlab.com.au/lab/wp-content/uploads/2011/07/Learningpath1.png style="margin: 0 auto;">

    Mind you this doesn't always work depending on the circumstances of the location of the image.

  5. Digital Raindrops
    Member
    Posted 2 years ago #

    Hi,
    Your image already has a class of 'aligncenter' but there is no style set for that in style.css however there is one for img.centered

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

    It is worth adding an aligncenter class style so at the end of style.css add:

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

    HTH

    David

  6. Skestrich
    Member
    Posted 2 years ago #

    Thanks for your advice, I will report back after making the css code changes...here goes!...

  7. Skestrich
    Member
    Posted 2 years ago #

    A very big thank you for your worthy advice and code input to my style.css sheet. I copied and pasted the .aligncentre code from Digital Raindrops post after the img.centred code and replaced the images on the posts and pages with new centre aligned images. Voila! I really appreciate your time and advice, what a top forum! Regards, Skestrich

Topic Closed

This topic has been closed to new replies.

About this Topic