How to align images using the HTML language. We’ll explain how to align center, right, or left, along with a brief explanation of image alignment using CSS.
In this article we are going to help you apply alignment to images using HTML. But keep in mind that currently the recommendation (or rather, what sets the standard) is to do everything you are going to see here using . As an HTML practice this knowledge can come in handy, but our recommendation is that you learn to do the same with CSS. At the end of the article we will explain a summary of the guides to achieve it.
HTML Align Attribute
We saw at the time the align attribute, which allowed us to align the text to the right, left or center of our page. We said that this attribute was not exclusive to the
tag, but could be found in other types of tags.
Well, turns out to be one of those tags that accept this attribute, although in this case the operation turns out to be different.
To align an image horizontally we can do it in the same way as text, that is, using the align attribute inside a
or
Image Alignment Examples
This code will display the image in the center:
The align attribute on images has been deprecated with HTML5, and as we’ve noted, CSS must be used to implement those styles.
However, we have already said that the tag can accept the align attribute. In this case, the utility we give you differs from the previous one.
The fact of using the align attribute within the tag allows us, in the case of giving it the left or right values, to justify the image of the side we want while filling the opposite side with text. In this way we embed our images within the text in a simple way.
Here you can see the type of code to create to obtain this effect:
Text as long as we want it to cover the left part of the image. I keep putting text to show the effect, Blah bla bla bla bla bla bla…
It would look like this:
Text as long as we want it to cover the right part of the image. I keep putting text to show the effect, Blah bla bla bla bla bla bla…
It would look like this:
If at any time we want to stop filling that lateral space, we can move to a free area by introducing a line break
within which we will add an attribute: clear
Thus, with labels of the type:
It will jump vertically until it finds the free left side.
It will jump vertically until it finds the free right side.
It will jump vertically until it finds both free sides.
Other align attribute values
There are other types of values that the align attribute can take inside the tag. These are relative to the vertical alignment of the image.
Suppose we write a line next to our image. This line can be, for example, above, below or in the middle of the image. Likewise, it is possible that in the same line we have several images of different heights that can be aligned in different ways.
These additional values of the align attribute are:
top
Fits the image to the top of the line. This means that, if there is a higher image, both images will present the upper edge at the same height.
bottom
Fit the bottom of the image to the text.
absbottom
It will place the bottom edge of the image at the level of the lowest element of the line.
middle
Matches the base of the text line to the vertical middle of the image.
absmiddle
Fits the image to the absolute middle of the line.
These explanations, which can be a bit complicated, can be more easily assimilated with a little practice.
It remains for us to explain how to introduce a caption or explanation below the image. To do this, continue reading the .
Using CSS to align images
As we have said, HTML is not the appropriate language to define styles on the page, as is the case with image alignment. The correct thing is to use CSS.
We have a whole that explains what that language is like and the different ways you have to use it. Of course, in it you will learn a lot about alignment of texts and images. We cannot go into detail in this article, because it would be too long. However, so that you can see it, we are going to explain what the CSS attributes would be for the alignment of texts and images.
Align images to center
To get an image to center we need to apply the style to the image’s container element, like this:
Left or Right Floating Alignment
To get an image to have the text surrounding the image itself (which in HTML is achieved with align “left” or “right”) we have to use the float attribute. This time the attribute is placed in the image tag itself, like this:
A lot of text would go here to surround the image and get to appreciate the alignment effect…
Please note that this is not a CSS tutorial. There is a very important detail that you should know and that is that the CSS that you have seen applied here is what is called “inline CSS”, which is not recommended. To see the different ways to apply CSS on a page, see the article .
We hope you found this quick CSS dive interesting and that it’s not that difficult. For more information on these and other attributes we recommend reading the article on
Facebook Comments
Disqus