Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

torndownunit

macrumors regular
Original poster
Jan 4, 2009
242
0
Hey guys. This is one of those things that I never really thought much about till I started to use mainly CSS.

I have a table (containing tabular data of course) that has small images next to product descriptions. I am trying to center the images both vertically and horizontally in the cell. I can find info on how each should be set online, but I can't seem to combine them properly.

It's one of those situation where I read several methods online, but the advice people give me on here will likely be (a) more current, and (b) way easier to understand and apply.

Thanks
 

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
I ran a simple case:
HTML:
<style type="text/css">
td {
 width: 750px; height: 600px;
 text-align: center;
 border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<tr>
  <td><img src="image01.jpg" alt="image 1" width="640" height="480" /></td>
</tr>
</table>
and the image was centered vertically and horizontally. The td seems to default to a vertical alignment of middle in most browsers. Also, img are display: inline by default. If the img is block instead then you'll need to add,
Code:
td img {
 display: block;
 margin: 0 auto;
}
to get the img to center horizontally. At least that's what I was seeing in my limited testing. The techniques for centering in tables haven't changed in a good while so whatever you've come across is likely still the common methods.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.