Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Mar 8, 2009, 09:03 AM   #1
torndownunit
macrumors regular
 
Join Date: Jan 2009
vertically and horizontally centering an image in a table cell using CSS

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

Last edited by torndownunit; Mar 8, 2009 at 09:12 AM.
torndownunit is offline   0 Reply With Quote
Old Mar 8, 2009, 07:52 PM   #2
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: 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>[/HTML]
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.
angelwatt is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Table With 5 Columns, Use CSS To Determine Each Column Width Kilamite Web Design and Development 13 Jun 3, 2014 02:49 PM
can't configure table cell right straber iPhone/iPad Programming 9 Feb 12, 2013 08:59 PM
Need Help Centering UL CSS menu screensaver400 Web Design and Development 2 Dec 27, 2012 07:28 PM
How come sometimes it is difficult to scroll horizontally and vertically in Safari? TH55 iPhone 2 Jun 25, 2012 09:53 PM
Cell's Image Taking Up All of Cell Dimensions newtoiphonesdk iPhone/iPad Programming 0 Jun 25, 2012 08:52 PM

Forum Jump

All times are GMT -5. The time now is 08:41 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC