1

I am having 3 images that I need to center horizontally and vertically in a table cell. I am struggling aligning them vertically, they are stuck at the bottom. How should I do this?

enter image description here

I have created a JSFiddle.

My Html is:

<body>
    <br /><br /><br /><br />
    <table>
        <tr>
            <td>aaaaaaaaaaaa</td>
            <td>bbbbbbbbbbbb</td>
            <td>cccccccccccc</td>
            <td>dddddddddddd</td>
        </tr>
        <tr>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td id="toAlign" colspan="4">
                <img src="http://www.marietta.edu/News/images/Wikipedia-logo-small.gif" />
                <img src="http://luc.devroye.org/PhilippPoll-Wikipedia-logo-LinuxLibertine--Small.png" />
                <img src="http://2.bp.blogspot.com/-CycORET_pXw/TjFcj6r-RoI/AAAAAAAAGLE/fyM10hArlBE/s1600/wikipedia_logo+SMALL.jpg" />
            </td>
        </tr>
        <tr>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td>eeeeeeeeeeee</td>
            <td>ffffffffffff</td>
            <td>gggggggggggg</td>
            <td>hhhhhhhhhhhh</td>
        </tr>
    </table>
</body>

My CSS is:

table {
    margin: 0 auto;
    font-family: "Courier New";
}

#toAlign {
    text-align: center;
    vertical-align: middle;
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jérôme Verstrynge
  • 57,710
  • 92
  • 283
  • 453

1 Answers1

3

http://jsfiddle.net/sDLxt/1/

Apply the vertical-align: middle; to the <img>:

#toAlign img {
    vertical-align: middle;
}
bwoebi
  • 23,637
  • 5
  • 58
  • 79