Home > Articles

Working with Images

  • Print
  • + Share This

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.

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.

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).

Figure 3.3 The image is aligned to the right, with the text then flowing around it on the left side.

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.