malibujamba Posted December 14, 2007 Share Posted December 14, 2007 hello,I have a div cald "background"It is 400px width and 300 high.inside the background div I have loaded an image inside the img tag. it also a link. so an img tag inside the a href tag.now the image size is variable and I want it to load exact in the middle of the background div.in css I could say at the background div: text-aling: center;that works, then the image is shown in the middle. Horizontaly.But verticaly it still stands at the top of the background div. How can I resolve this? Link to comment Share on other sites More sharing options...
aspnetguy Posted December 14, 2007 Share Posted December 14, 2007 without the image having a consitent height, the only method I know of is to make your div a table cell. you can set "vertical-align: middle" for table cells. Link to comment Share on other sites More sharing options...
malibujamba Posted December 14, 2007 Author Share Posted December 14, 2007 without the image having a consitent height, the only method I know of is to make your div a table cell. you can set "vertical-align: middle" for table cells.Indeed, I know. But I was thinking, maybe something simmular is there also for a div. But if not I think I might do it that way. Link to comment Share on other sites More sharing options...
aspnetguy Posted December 14, 2007 Share Posted December 14, 2007 you can set the div to "display: table-cell" and apply vertical-align but it doesn't work in IE so it is pretty much useless. Link to comment Share on other sites More sharing options...
malibujamba Posted December 14, 2007 Author Share Posted December 14, 2007 indeed, it should work in all browsers.atleast the ones I am aiming at are IE 6, IE 7 and firefox Link to comment Share on other sites More sharing options...
aspnetguy Posted December 14, 2007 Share Posted December 14, 2007 your only option is to use a table Link to comment Share on other sites More sharing options...
malibujamba Posted December 14, 2007 Author Share Posted December 14, 2007 hmz, I don't want to:DI think I just let it stick to the top.thnx for your help anyway Link to comment Share on other sites More sharing options...
aspnetguy Posted December 14, 2007 Share Posted December 14, 2007 does the div have to be 400x300 or can it vary with the image? You could put a 25px padding on the div and it would make the image look centered but the div size would change with the image Link to comment Share on other sites More sharing options...
malibujamba Posted December 14, 2007 Author Share Posted December 14, 2007 does the div have to be 400x300 or can it vary with the image? You could put a 25px padding on the div and it would make the image look centered but the div size would change with the imagehmz yes that might work for the div and the image. but in that case I have to center the div instead of the image. so the effect would be still the same. Link to comment Share on other sites More sharing options...
jlhaslip Posted December 26, 2007 Share Posted December 26, 2007 Does this help?http://www.jlhaslip.trap17.com/samples/mis...entereddiv.htmlOnly thing about this technique is that you would need to have a consistent size of Image and use the margin offsets as per the code sample provided to center the image. Link to comment Share on other sites More sharing options...
malibujamba Posted January 9, 2008 Author Share Posted January 9, 2008 Does this help?http://www.jlhaslip.trap17.com/samples/mis...entereddiv.htmlOnly thing about this technique is that you would need to have a consistent size of Image and use the margin offsets as per the code sample provided to center the image.the problem in this case as you say is that the images have not a consistent size. but thanx anyway. It is usefull for other things maybe. Link to comment Share on other sites More sharing options...
Synook Posted January 10, 2008 Share Posted January 10, 2008 You could use JavaScript to determine the size of the image and modify the layout's CSS properties accordingly. Link to comment Share on other sites More sharing options...
emicha Posted January 14, 2008 Share Posted January 14, 2008 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"> div.parent { display: table; height: 250px; #position: relative; overflow: hidden; width:250px; border: 1px solid black; text-align: center; } div.parent div.child_out { #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; } div.parent div.child_out div.child_in { #position: relative; #top: -50%; #left:-50%; }</style></head><body><div class="parent"> <div class="child_out"> <div class="child_in"> <img src="http://forums.data.bg:8080/images/avatars/18819231564748948882e1d.jpg" alt="" /> </div> </div></div></body></html> This is my decision. FireFox is smart browser and it supports display: table-cell and display: table. IE is a stupid browser but there are a few "hacks" to achieve vertically aligned layout. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.