Solved

horizontal centering of image in <td> with css generated drop shadow

Posted on 2009-05-12
3
809 Views
Last Modified: 2012-08-13
looking to center an image that is using a css generated drop shadow with negative margins and float:left;

i'm using tables as opposed to pure css because of the cms we're plugging this into.

here's the link:

http://ctemps.cjehost.com/thumbs2_table.php

notice how the thumbnails are horizontally aligned to the left-i need them to horizontally align center.  i'm sure it's the float:left and negative margins that are throwing me for a loop here. but, short of rethinking my drop shadow styles can anyone think of a quick fix here??
/*GALLERY DROP SHADOW*/

.img-shadow {

float:left;

background: url(../images/drop_shadow.png) no-repeat bottom right !important;

background: url(../images/drop_shadow.png) no-repeat bottom right;

margin: 10px 0 0 10px !important;

margin: 10px 0 0 5px;

}

/*GALLERY IMAGE href*/

a.imgOver img:hover{

background-color: #b81652;

}

a.imgOver img{

display: block;

position: relative;

margin: -10px 1px 1px -10px;

padding: 4px;

}
 

html:
 

<td height="136" width="136" align="center">

						<div class="img-shadow"><a href="#" class="imgOver"><img src="images/fpo_thumb_num4.jpg" border="0" /></a></div></td>

Open in new window

0
Comment
Question by:phillystyle123
3 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 500 total points
ID: 24391254
You can make your div have margin:0 auto with a specific width if you know the image width.

You can use display:inline with bottom-padding on your div/a if your image is flexible. Then use text-align:center on your td.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now