Results 1 to 3 of 3

Thread: JavaScript Bottom Alignment of Images?

  1. #1
    Join Date
    Mar 2009

    JavaScript Bottom Alignment of Images?

    I am trying to replicate the way in which images in the feed on this website (http://haw-lin.com/) are bottom-aligned.

    From copying and tinkering with the code on the site, I conclude that the bottom alignment is not being achieved through pure CSS—at least not evidently through the use of linked style sheets as opposed to inline style definitions. I determined this by commenting out all the linked style sheets; many other aspects of the site appeared wonky when I did this, but the bottom alignment of the images was not broken. The images only began top aligning relative to each other when I commented out included javascript files or sections of js code.

    Any help in diagnosing what specifically is making the bottom alignment of images on this site possible and/or advice on how to similarly implement this effect on my site would be greatly appreciated.


  2. #2
    Join Date
    Feb 2003
    Michigan, USA
    The browser itself is actually doing the alignment. Looking in Firebug or the developer tools for Safari or Chrome show that the vertical-align CSS property is being inherited from the browser default style: baseline.

    All of the images are inline on that page. By default, images are aligned to the "baseline" of a line of text, so that the bottom of images are aligned horizontally with the bottom of many lower case letters like "a" or "z".

    Nothing special is being done at all. That's just how browsers render images naturally.

  3. #3
    Join Date
    Mar 2009
    toicontien, THANK YOU! Not that I'm super savvy in CSS but I'm kicking myself for not figuring this out sooner but I'm very grateful that you pointed it out to me. Such a simple and elegant solution compared to the needlessly complex solution I'd been using!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center