WordPress.org

Ready to get started?Download WordPress

Forums

Hover Image
[resolved] Horizontal & Alignment FIX (3 posts)

  1. adesigner1
    Member
    Posted 7 months ago #

    I see a few people where having issues with centering or aligning their images side be side (horizontally)instead of vertically, and I have come up with a quick fix for this issue.

    What you need to do is place the images inside a table and then center align the table where you see fit.

    <table border="1" align="center">
    <tr>
    <td>CELL 1</td>
    <td>CELL 2</td>
    </tr>
    <tr>
    <td>CELL 3</td>
    <td>CELL 4</td>
    </tr>
    </table>

    REMEMBER - to put your 2 images in each cell. Add more columns or rows to suit your needs.

    Have a look at my example:

    http://adesigner.co.uk/biasonic/about/

    http://wordpress.org/plugins/hover-image/

  2. letscre8
    Member
    Posted 7 months ago #

  3. adesigner1
    Member
    Posted 7 months ago #

    Hi,

    There are a few differences from my code so Ive attached mine so you can use and alter it as needed. I hope its not too confusing but you should be able to see that I have the 2 images in each cell. you could just replace my images with yours and edit to suit your website.

    Hope this helps

    P.S I have 4 main images so if you only want main 2 images then you will need to delete the last 2 Cells in the table.

    '
    <table width="153" border="0" align="center">
    <tbody>
    <tr>
    <td>
    <p style="text-align: center;">[himage]<img class="alignnone wp-image-357" style="border: 0px none; margin: 0px;" alt="Madam X-1" src="http://adesigner.co.uk/biasonic/wp-content/uploads/2013/05/Madam-X-1.jpg" width="392" height="459" /><img class="alignnone wp-image-386" alt="Madam X-1hover" src="http://adesigner.co.uk/biasonic/wp-content/uploads/2013/05/Madam-X-1hover.jpg" width="392" height="459" />[/himage]</p>
    </td>
    <td>[himage]<img class="alignnone wp-image-356" style="border: 0px none; margin: 0px;" alt="Phaze One-1" src="http://adesigner.co.uk/biasonic/wp-content/uploads/2013/05/Phaze-One-1.jpg" width="392" height="459" /><img class="alignnone wp-image-388" alt="Phaze-One-1hover" src="http://adesigner.co.uk/biasonic/wp-content/uploads/2013/05/Phaze-One-1hover.jpg" width="392" height="459" />[/himage]</td>
    </tr>
    <tr>
    <td style="text-align: center;">
    <p style="text-align: center;">[himage] <img class="alignnone wp-image-355" style="border: 0px none; margin: 0px;" alt="Darka" src="http://adesigner.co.uk/biasonic/wp-content/uploads/2013/05/Darka.jpg" width="392" height="459" /><img class="alignnone size-full wp-image-390" alt="Darka-1hover" src="http://adesigner.co.uk/biasonic/wp-content/uploads/2013/05/Darka-1hover.jpg" width="392" height="459" />[/himage]</p>
    </td>
    <td style="text-align: center;">
    <p style="text-align: center;">[himage] <img class="alignnone wp-image-354" style="border: 0px none; margin: 0px;" alt="Tunde-1" src="http://adesigner.co.uk/biasonic/wp-content/uploads/2013/05/Tunde-1.jpg" width="392" height="459" /><img class="alignnone size-full wp-image-391" alt="Tunde-1hover" src="http://adesigner.co.uk/biasonic/wp-content/uploads/2013/05/Tunde-1hover.jpg" width="392" height="459" />[/himage]</p>
    </td>
    </tr>
    </tbody>
    </table>
    '

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.