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?
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
Apply the vertical-align: middle; to the <img>:
#toAlign img {
vertical-align: middle;
}
Answered By - bwoebi Answer Checked By - Timothy Miller (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.