From the course: HTML: Images and Figures
Alignment
- [Narrator] It's important to know how to align images with surrounding text and how to wrap text around an image. In the first paragraph of this webpage, on lines 17 through 20, the Flag of Japan is in the middle of the text. Because the image element is an inline element, images flow right in with the surrounding text. The flag sticks up above the text and it doesn't seem to look quite right. This is the default alignment of images, the bottom of the image is aligned with the baseline of the text. The baseline is shown here in red. Baseline is a typographical term. Here it is in reference to other terms that you may see as you go through your career in web design. You can adjust the alignment of the image with respect to the text by using the vertical align CSS property. The link that shows them all in action is shown here at the bottom of the screen. But for this instance, let's take the flag and give it a style of vertical align middle. Save it and that looks a lot better. You'll see that the flag is now centered along with the text that surrounds it. Looking further down the page, we have an image of The Imperial Palace followed by text. This also leaves a lot to be desired. It would look much better if the text were right next to the image wrapping around it. To accomplish this, you use the float CSS property. When an image is floated, it's moved to the side of the window you specify and the browser then reflows the text around it. Most commonly, you'll use the left and right values, depending on where you want the image to appear. The link at the bottom of the screen shows you all the possible choices. Let's float this image to the left, and see what it looks like. Now the text is wrapped around the image, but you'll notice it's wrapped rather tightly around it so let's add some padding on the right and bottom of the image to separate the text from the image further. We'll set the padding to be zero on the top, one half of the current font size on the right, one half the current font size on the bottom and zero on the left. Now the text and image have some breathing room. Sometimes float doesn't work ideally. Let's say I wanted to take this last paragraph about Tokyo Station and split it into its own paragraph. So I'll end the previous one and start a new one. Save and when I reload, and you'll see that the paragraph is still next to the image but I'd really like it to begin after the image. To accomplish this, you use a style to clear left or clear right depending on the float to tell the browser, wait until the left side of the browser window is clear of any images before displaying this paragraph. And now, no matter how much I zoom in on the text or no matter where I resize my window, I'm always guaranteed that the text will be below the image. If you have images that are floated both to the left and right as you see in this screenshot, you can use clear both to ensure the text doesn't appear until the browser window is clear of images on both sides. In this case, the last paragraph was positioned properly using clear both. Use alignment and floats to give your webpages a more balanced look.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.