ifubad Posted September 3, 2008 Share Posted September 3, 2008 is it possible to easily align an img to the bottom of a div, other than the methods below? Only methods I found so far, is to either utilize a table or using position. Quote Link to comment Share on other sites More sharing options...
dropfaith Posted September 3, 2008 Share Posted September 3, 2008 http://www.w3schools.com/Css/pr_pos_vertical-align.asp Quote Link to comment Share on other sites More sharing options...
ifubad Posted September 3, 2008 Author Share Posted September 3, 2008 the vertical-align property only works with aligning the surrounding text of the img's parent element, it does not move the image at all. Quote Link to comment Share on other sites More sharing options...
wrongmove18 Posted September 3, 2008 Share Posted September 3, 2008 add this css style to your div style="vertical-align: bottom; display: table-cell;" display: table-cell; makes your div behave like a <td> tag. but sadly IE does not support table-cell. Quote Link to comment Share on other sites More sharing options...
ifubad Posted September 3, 2008 Author Share Posted September 3, 2008 I'll save it for future reference. I need it to also work in IE and prefer not to use hacks. It's only a single page that needs this, I guess I may just have to be deal with using table. Why did Bill Gates named his company after his penis??? Thnx anyway Quote Link to comment Share on other sites More sharing options...
haku Posted September 3, 2008 Share Posted September 3, 2008 You can set the position on the containing element to relative, then set the position of the element you want to be at the bottom to absolute. Then set the bottom on the absolutely positioned element to zero. If you want, you can also give the containing element a bottom padding that is equal to the height of the absolutely positioned element so that things don't drop behind it (I haven't tested the padding, but it should work). Quote Link to comment Share on other sites More sharing options...
ifubad Posted September 3, 2008 Author Share Posted September 3, 2008 Ok, using position relative and then absolute to vertically align the image to the bottom of its container was really simple. Now, the other problem is that when an element is set to absolute, it automatically left align itself to its parent container, and to center it horizontally, I need to set the left property? If so, now the tricky part is that if the width of each image is different, is the only way to figure out how many pixels to apply to the left property is using php? (which I already figured out the math to do that with, just trying to see if there was a more efficient way of doing this). Quote Link to comment Share on other sites More sharing options...
haku Posted September 3, 2008 Share Posted September 3, 2008 I believe that is the only way to do it. I could be wrong though. You can try giving it a left: 50%, but I believe that will center the left side of the object, not the center of the object, so it probably won't work. Quote Link to comment Share on other sites More sharing options...
ifubad Posted September 3, 2008 Author Share Posted September 3, 2008 correct, left:50% goes by the left side of the absolute object. Cool, I'll use php. thnx Quote Link to comment Share on other sites More sharing options...
ifubad Posted September 4, 2008 Author Share Posted September 4, 2008 Amazing, if you put text-align:center in the right div, it actually will horizontally center the image and text within IE6, but not FF2. Huh... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.