Question

I have used <div align="center"> and put the image inside the div tag. Well the image is at the center but not at the middle. The image started from the top of div tag and placing at the center but I want it to be placed at the middle not at the top.

When I googled it I found <td valign="middle">. and its working as I intended and below is what I have designed after googling,

  <div align="center" style="width:510px;height:510px;margin-left:300px">
  <table style="width:510px;height:510px">
  <tr>
  <td align="center" valign="middle">
  <img id="main" src="dock.jpg" style="max-width:500px;max-height:500px"/> 
  </td>
  </tr>
  </table>
  </div>

But using a table for these purpose is it harmful ? Because I have tried <div align="center" style="vertical-align:middle"> but does not seem to work as i expected and please let me know if there is a way to do without table ?

Answer 1

You shouldn’t be using <div align="center"> either really, its been deprecated:

http://reference.sitepoint.com/html/div/align

This attribute is deprecated. The correct method for aligning a div is
to use the CSS text-align attribute.

I’m not certain on the best way of vertically aligning div‘s (although you may find this article worth reading), but I know that you are right, you shouldn’t use tables as a solution. Table should only be used when creating a table of data results for example, never layout purposes.