Will.Whim

A weblog by Will Fitzgerald

vertically-centered images in a horizontally scrolling DIV element

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:

<style type="text/css">
.scrolling_div {
 width: 300px;
 height: 100px;
 overflow: auto;
 display: block;
 white-space: nowrap;
 line-height: 90px;
 border: 1px solid #000;
}

img {
 vertical-align: middle;
 border:none;
 height: 100px;
}
</style>

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.

Advertisements

Comments are closed.

%d bloggers like this: