PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, November 18, 2022

[FIXED] How to align multiple images in a table cell vertically?

 November 18, 2022     css, html, html-table, image, vertical-alignment     No comments   

Issue

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQMicbkVFqnAfd3lN2jOZsAJmr1fbih7E3AvVvdJfbZeLHGBI5y7NZAkbrCqwd9UoVmI6GFJvXEIiyhP7KSxJl-ywhImQE-tqBHMhMyZTcVp6tlTYwooRQn4YCtaBFmr4obZLerb-jsqM/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;
}


Answered By - bwoebi
Answer Checked By - Timothy Miller (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing