How to align multiple images in a table cell vertically?


Tags: html,css,image,table,vertical-alignment

Problem :

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;
}


Solution :

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

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

#toAlign img {
    vertical-align: middle;
}

    CSS Howto..

    How to change the color of the active link in the menu

    How to do taxonomy based css styling using drupal template.php?

    How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

    how to remove 2nd 0r 4th div padding with Pure CSS not jquery

    CSS: How to make element appear from left of the screen?

    How to add sub-menu (css) under actual sub-menu in WordPress

    What is the correct css for the list of results to show correctly in this situation? [closed]

    How to change CSS color values in real-time off a javascript slider?

    How to make the div at the screen center not lower right corner?

    How does one customize the appearance of jquery.perfect-scrollbar?

    how to clip text in css like gmail does to emails subject listings

    How can I get this style effectv with css or jquery?

    How to override mixins in LESS CSS 1.4+

    How to style DOM element with CSS that was created with JavaScript function

    how to set an element at fixed relative position in html rendering.? [closed]

    How to make a list float to the right in CSS?

    How to create a responsive sprite sheet animation in css?

    How do you get a Radio Button to change text color in html with jquery?

    How to vertically align text to the middle of a list

    How to show image based on sort type in GridView

    how to vertically align this div?

    My sidebar is not going to right of my page, but to my left. How do I fix this?

    How to make website change its layout of image/text when the browser dimensions are changed?

    How can I push the first row of images down?

    How can I get jQuery or Javascript to change css based on the current url?

    How do I override * asterisk for css?

    Why IE10 shows something totally different

    How do I force span elements to remain in place between variable length text and an image element?

    How to include all css kept in a direcotry?

    How do I stick my footer to bottom of the page with Google Chrome?