Previous Message
Next Message

Centering an image of unknown size in a div

Sent by Wildranger222222 on 19 October 2004 09:09


>I have to display a series of corporate logos of various sizes (there  are 
currently about a dozen, ranging in size from 70x40 to 180x100; no two  are 
exactly the same size).

>What I'd like to do is present them  in a series of floated divs:

>div.logo {float: left; width 190px;  height 120px;}

>with the logo horizontally and vertically centered in  the div, so that 
visually, the logos are all aligned on their  centerpoint.

>I've found a couple of different ways of centering the  logos horizontally, 
but I was up til 4 a.m. on the web searching for ways to  center them 
vertically.

>I've tried various things, including  wrapping them in divs or spans, but I 
don't seem to be able to get CSS to  find the vertical centerpoint of the 
graphic or to center it within the  div.logo
 
 
 
-------------------------------------------------------
 
*The concept is to position it in the middle first using positioning and  50% 
of the available space, then move its box to the left half the  distance of 
its width using negative margins. Try this code. Since yours has an  unknown 
width or height, you may have to add some other tricks to this. But  create a 
div with an id="content" with some text attach this style:

 
#content {
position:absolute;
left:50%;
top:  50%;
width:500px;
margin-top:-100px;
margin-left:-266px;
padding:15px;
border:1px  dashed #333;
background-color:#eee;
}
 
Mitchell
_www.stormdetector.com_ (http://www.stormdetector.com) 
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Possibly related: