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 we look at ways to solve three of the most difficult alignment challenges: positioning images within text paragraphs, centering images within the browser window, and stretching images to fill the browser’s entire viewport.