Thanks to modern digital cameras photography has become extremely popular recently. Our world is currently well documented with thousands of photos taken each second. Displaying these masterpieces is also very easy in several online photo sharing services. In case you are developing your own photo gallery software, you may find it handy to neatly align the images on the web page. The ideal way to show the pictures is to center and bottom align them in a grid as shown in figure 1.
Programmers tend to use plain strict XHTML to create web pages. In addition to this all styling is placed in a CSS style sheet to separate content from how things look in the browser. Aligning elements is relatively straightforward with minimal effort. As images are inline elements by default horizontal centering can be accomplished with simple text-align property having set to center. The following code snippet shows the HTML code as well as styling.
<style type="text/css">
li {
float:left;
text-align:center;
width:100px;
}
</style>
<ul>
<li>
<a href="show.html?id=1">
<img alt="Photo 1" src="photo1.jpg"/>
</a>
<p>Photo 1</p>
</li>
<li>
<a href="show.html?id=2">
<img alt="Photo 2" src="photo2.jpg"/>
</a>
<p>Photo 2</p>
</li>
<li>
<a href="show.html?id=3">
<img alt="Photo 3" src="photo3.jpg"/>
</a>
<p>Photo 3</p>
</li>
</ul>
I use unordered list to make a list of photos. Applying style to each list element (li) I instruct the browser to make that element exactly 100 pixels wide and center all inline elements inside. Floating property makes list elements to float horizontally attached to each other. The first attempt usually gives a result something like in figure 2.
The final goal is to vertically align the photos to the bottom of the grid row still maintaining the horizontal center aligning as shown in figure 3. At first sight this may be a little tricky, but careful study will finally lead to the desired result.
The anchor element (a) in the sample code above plays an important role. To align images vertically needs a container of some sort and the anchor tag is such a wrapper in my example. This requires changing the anchor element from an inline element to a block element, which in turn loses the horizontal centering. So, I have two challenges to solve. Now that I cannot use text-align property as it serves only inline elements I need to figure out how to center block elements. The basic idea is to center the inner element inside a container as shown in figure 4.
The anchor element will be the container, but any element is good for this purpose, and the div element is especially handy for wrapping other elements. The following styling first changes the anchor element to a block element. I then set the height to 150 pixels and width to 100 pixels, these would be the height and width of the grid cell and are usually same as the largest measured picture in the photo list. The positioning property makes the anchor box relatively positioned thus maintaining its position in the list.
li {
float:left;
}
li a {
display:block;
height:150px;
position:relative;
width:100px;
}The image element is the inner object of the container and needs extensive styling as well. This little code of style centers the image horizontally and vertically aligns it to the bottom of the container. I first position the image absolutely so that I can use the box offset properties. Setting the bottom property to zero ensures there is nothing below the image. The next step is to set both left and right properties to zero so that the image has nothing on the left or right. Finally the margin property sets the top and bottom margins to zero and with auto value calculates equal margins on both sides, thus vertically centering the element.
li a img {
bottom:0;
left:0;
margin:0 auto;
position:absolute;
right:0;
}Just changing the underlying styling information you can now display your favorite photos in a grid or just list them as an ordinary top-down list. There is no need to change the content to get things done.
Final Words
Aligning pictures with style and minimal number of HTML elements is a challenge. Visual formatting should never be mixed with the content. The photo listing in the example uses only the basic elements and provides easy web page rendering to any well-behaving browser. Even mobile user agents, such as cell phones and palm tops can show the basic HTML although not all can fully render the complicated style sheet.