Designing Web & Mobile Graphics: Fundamental Concepts for Web and Interactive Projects

Chapter 14. Aligning Images

“Sometimes you want to give up the guitar, you’ll hate the guitar. But, if you stick with it, you’re gonna be rewarded.”

—Jimi Hendrix

Adding an image to a web page is fairly straightforward. While the img element has its own alignment attribute, it’s now better practice to control image alignment through CSS.

You can use CSS to control where the image appears in relation to other elements using relative positioning, floats, and margins. Alternatively, you can control an image’s position with respect to the browser window with absolute positioning and values from the browser edge (such as left and top).

In this chapter ...