Support » Fixing WordPress » How do I align multiple images vertically in a post

  • I created a post article containing multiple images. I tried to add images several ways. I inserted them first and selected align left for each of them. Then I added the text. However the result is not what I expected. The images are all over the place and the post looks messy. Then I tried adding text first and then images again selecting align left but that was worse. Lastly I tried inserted images as needed but that didn’t work either. Being HTML knowledgeable I could go in and tweak the code however there must be a better way!

    Please can someone help!

    Thank you,
    Tim

Viewing 6 replies - 1 through 6 (of 6 total)
  • esmi

    (@esmi)

    Forum Moderator

    You will either need to manually enter a CSS clear between each image block or try aligning the images centrally.

    Moderator keesiemeijer

    (@keesiemeijer)

    moderator

    url to post please?

    The URL is http://chefdonhensley.com and the post is WINE TOURS #1 Cedar Creek Winery.

    So I manually entered <div style=”clear:both;”></div> after each image. I don’t like the results because the text no longer wraps around the images. Instead it is pushed to below the images leaving a large chunk of white space. Is there another solution? I have remove the clear float div and restored it to the original state.

    Thank you!

    I am by far not the expert in WP, but I recommend a great WP editor:

    http://wordpress.org/extend/plugins/fckeditor-for-wordpress-plugin/

    You can insert tables to help with formatting. And you can make the tables invisible. I use this for entering my images.

    I know some say you must use CSS rather than tables in HTML.

    Moderator keesiemeijer

    (@keesiemeijer)

    moderator

    maybe this is what you want. Look in your theme’s stylesheet style.css for this:

    .wp-caption {
       border: 1px solid #ddd;
       text-align: center;
       background-color: #f3f3f3;
       padding-top: 4px;
       margin: 10px;
       /* optional rounded corners for browsers that support it */
       -moz-border-radius: 3px;
       -khtml-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
    	}

    and put the clear: both; in there like so:

    .wp-caption {
       border: 1px solid #ddd;
       text-align: center;
       background-color: #f3f3f3;
       padding-top: 4px;
       margin: 10px;
       /* optional rounded corners for browsers that support it */
       -moz-border-radius: 3px;
       -khtml-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
       clear: both;
    	}

    this will put all your images on the left and your text wrapping around them.

    Oh THANK YOU so much keesiemeijer!! I changed the stylesheet as you indicated and the blog post now looks like I want it to.

    Regards,
    Tim

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How do I align multiple images vertically in a post’ is closed to new replies.