Text image alignment problem in tables

  • Unknown's avatar
    bateau4u · Member ·

    I created a new page with my blog that has a series of four tables. Each table consists of a list of countries, and some countries have their flag if someone from that country visited my blog.

    My problem is that I cannot get the text and images to align vertically. There is an offset between the text, and the image. They should line up but they don’t. The images are above the text in the cell.

    I coded the tables by hand. However, WordPress does insert some code when I insert the image.

    Here is a link to the page in question:
    http://missdivinity.wordpress.com/about/countrylist

    Any help would be truly appreciated!

    Divinity’s Dad

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

  • Unknown's avatar
    timethief · Member ·

    See here please > http://en.support.wordpress.com/visual-editor/#alignment

    The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it.

    Align-left means position left, with the rest of the content wrapping around the right side of the image.

    Align-right means position right, with the rest of the content wrapping around the left side of the image.

    Align-center means position center, with no wrap-around (= the rest of the content below the image).

    If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

    To prevent the staggered effect what you do is insert the following snippet of code into the Text (HTML) editor after each image/text pair:
    <div style="clear:both;"></div>

  • Unknown's avatar
    timethief · Member ·

    If you have nothing but time on your hands you can continue to do as your are doing now. If that’s not the case then there are alternatives.

    If you want a map then you can use clustrmaps plain HTML version (non-Javascript) and place the code in a text widget in your sidebar. http://www.clustrmaps.com/index.htm

    If you want flags then you can use plain flagcounter HTML version (non-Javascript) and place the code in a text widget in your sidebar. http://flagcounter.com/index.html

    text widget http://en.support.wordpress.com/widgets/text-widget/

  • Unknown's avatar
    bateau4u · Member ·

    I’m not doing so well today. Some assistance please!

    Exactly where does your snippet (<div style=”clear:both;”></div>) go?

    Here is a section from the table code for one country:

    <td>
    <div align=”left”>Belgium</div></td>
    <td><img class=”alignnone size-full wp-image-5619″ alt=”Belgium” src=”http://missdivinity.files.wordpress.com/2014/02/belgium.png” width=”32″ height=”32″ /></td>
    <td></td>

    I’ll check out the information in your links thoroughly tomorrow.

  • Unknown's avatar
    timethief · Member ·

    To prevent the staggered effect what you do is insert the following snippet of code into the Text (HTML) editor after each image/text pair:
    <div style="clear:both;"></div>

  • Unknown's avatar
    bateau4u · Member ·

    Thanks, however, I am not as savvy as you seem to think.

    I thought I placed your snippet after the end tags of each pair on the first row with flags, but the alignment is still the same.

    Now it’s very possible I placed the snippet in the wrong place, but that’s why I asked. Quite honestly, I don’t know exactly where to insert the code snippet.

  • Unknown's avatar
    bateau4u · Member ·

    I found a fix!

    I needed to add the following code into each country opening <td> tag.

    style=”vertical-align:middle;”

    For example, <td style=”vertical-align:middle;”>

    Thanks!

  • The topic ‘Text image alignment problem in tables’ is closed to new replies.