vertically-centered images in a horizontally scrolling DIV element
September 1, 2005
Posted by on
I wanted to have a bunch of images, all lined up in a horizontal row, but within a fixed size element (like above). This is mostly a note to myself so I can ‘remember’ this the next time I need it…
Here are the CSS style declarations:
border: 1px solid #000;
Note that the IMG size is the same as the line-height of the enclosing DIV; which is just a bit less than the DIV height (to allow for the scroll bar). The crucial bits of magic to have only horizontal scroll bars is to use white-space: nowrap and overflow: auto.