WordPress.org

Ready to get started?Download WordPress

Forums

How do I align multiple images vertically in a post (7 posts)

  1. timburkart
    Member
    Posted 4 years ago #

    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

  2. esmi
    Forum Moderator
    Posted 4 years ago #

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

  3. keesiemeijer
    moderator
    Posted 4 years ago #

    url to post please?

  4. timburkart
    Member
    Posted 4 years ago #

    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!

  5. Avrohomd
    Member
    Posted 4 years ago #

    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.

  6. keesiemeijer
    moderator
    Posted 4 years ago #

    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.

  7. timburkart
    Member
    Posted 4 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic