vertically and horizontally centering an image in a table cell using CSS

torndownunit · 09:12 AM

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 · Mar 8, 2009, 07:52 PM

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.

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.
	0

Mar 8, 2009, 07:52 PM	#2
angelwatt Demi-God (Moderator emeritus) Join Date: Aug 2005 Location: Ohio	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. __________________ My Regular Expression Testing Tool Vim Commands Cheat Sheet
	0

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
thread	Thread Starter	Forum	Replies	Last Post
center an iframe with css?	Starhorsepax	Web Design and Development	8	Feb 22, 2013 03:51 PM
Looking for a Vertical and Horizontal Mounting Dock	Badfoot	iPhone Accessories	3	Dec 4, 2009 03:21 PM
is it possible to always center my image in the screen if I add to the view and use	ulquiorra	iPhone/iPad Programming	8	Sep 9, 2009 11:14 AM
Looking for help centering an image in safari	jaypm101	Mac Basics and Help	0	Dec 3, 2008 12:28 PM
centering an image in the scrollview	cmezak	iPhone/iPad Programming	1	Aug 15, 2008 01:11 PM


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