media alignment

• 

  richmantom · Member · Jul 22, 2014 at 2:44 pm

  • Copy link
  • Add topic to favorites

  I can’t align my media to the centre in a post. I can align to the left or right, but the only way I can get it to centre is by increasing the indent, which means it doesn’t look right on smaller screened devices.

  The blog I need help with is: (visible only to logged in users)

• 

  thatrobyn · Member · Jul 22, 2014 at 3:49 pm

  • Copy link

  Hi there Tom!

  With this theme, you’ll need to use <div> codes to center your image.

  In order to do this, please open your latest post (Stunning Damselfly!) in the editor.

  1. Click the Text tab so you’re able to see your HTML code.
  2. Where you see <img class=”aligncenter” src=”http://tomrichardswildlife.files.wordpress.com/2014/07/damselfly.jpg?w=300″ alt=”” width=”300″ height=”200” /> — delete class=”aligncenter”
  3. You will also delete your padding code/brackets:
     <p style=”padding-left: 120px;”>
     and
     </p>
  4. In place of the padding code/brackets, you’ll add <div align=”center”> and </div>

  Update your Post. The image will now be aligned center.

  If you’d prefer to have your images centered automatically, you can add the Custom Design upgrade to your site, and we can help you adjust your CSS code.

  However, if you don’t mind doing the formatting manually, you don’t need the upgrade at all.

  Please let us know if you have any other questions. Thanks much and happy blogging!

• 

  richmantom · Member · Jul 24, 2014 at 11:22 am

  • Copy link

  Thanks very much for your help!

  I’ve managed to centre the image on that page, but now I can’t seem to create line breaks between the image and the text?

• 

  thatrobyn · Member · Jul 24, 2014 at 5:09 pm

  • Copy link

  Hiya Tom!

  My suggestion is to add a bottom margin for the image, rather than adding a line break. I think the result is neater, and more manageable than adding line break code.

  Here’s how you can do this:

  1. Click Posts → All Posts, and open Stunning Damselfly! in your Post editor.
  2. Click once on the image at the top of your Post.
  3. You will see two buttons appear: A pencil (to edit the image) and an X (to delete it). Click the pencil.
  4. Your image details box will open. If the section called Advanced Options is close, click on the little triangle next to it.
  5. You will see boxes to add margins to your image. Add a 12 into the bottom margin box.
  6. Click Update. Then click Update in your Post editor as well.

  That should do the trick. If you want more space, the bottom margin number can be increased, of course!

  In future Posts, you can do this as you’re adding your image. You won’t have to go back to edit your images and resave.

  I hope this helps! Take care.

• 

  richmantom · Member · Jul 24, 2014 at 6:17 pm

  • Copy link

  Ah brilliant, thanks you’ve been a great help!

• 

  thatrobyn · Member · Jul 24, 2014 at 6:29 pm

  • Copy link

  Tom, my pleasure! So glad that helped!