- Working with Images
- Web Graphics Editors
- Adding Graphics Using the Image Element
- Image and Text Alignment
- Using Images as Links
- Image Maps
- What's Next
Image and Text Alignment
Two adjustments can be made to the placement of an image within your page: how the image is aligned with respect to the baseline, and where the image sits relative to the entire page. Take another look at Figure 3.1 from the previous example. The bottom edge of the image sits on the baseline, which is the default behavior. Also note that the image sits on the left margin of the page, which is the alignment relative to the page as a whole.
){kind=link}
If we change the first alignment aspect, relative to the baseline, three choices are available: top, middle, and bottom. In this case, it's important to remember that the image is considered to be entirely within a single line of text–so if we were to choose align="middle" for this attribute, you'd get results looking something like Figure 3.2.
){kind=link}
Figure 3.2 Changing the image alignment to middle only adjusts its position relative to the baseline.
For smaller images, this might be okay, but with something this large, the placement is awkward to say the least.
What helps in this situation is to align the image relative to the margins using align="left" or align="right". Then, the image is solidly docked at the margin, and the text will flow around it (see Figure 3.3).
){kind=link}
Figure 3.3 The image is aligned to the right, with the text then flowing around it on the left side.