In this article we are going to explain how to center an image in html, one of the most practical and used languages to develop web pages. There are different ways to do it, as well as tools to achieve it. In fact, one of the advantages of HTML is that it is possible to complement it with other languages.
A well-designed website with well-distributed information It is very important for any brand, so having basic knowledge of HTML and HTML5 is the first thing you should look for if you want to make your own website. If the images are not well aligned, the user experience will be worse. Find out how to do it easily using HTML, CSS, HTML5 and Bootstrap.
For align images in HTMLyou can use the attribute align, which is responsible for changing the position of the image. It can be done to the left and to the right without problems. It is an attribute that is not exclusive, but it is possible to use it in several labels.
One of the most common labels is . For example, if you want to know how to center an image horizontally in HTMLthe attribute is used align in the label, and there would be a result like the following:
For this situation, the image would be replacing the text. However, if you are going to use only the tag , even if it accepts the attribute align, the utility differs from the previous case. This attribute allows you to move the values of right or leftlike justify the image in the position you want. If you want to create this effect, this would be the code:
Text
The image would be aligned to the right, and the text you place will go just to the left. If you want to change the position, just substitute “right” by “left” and you will have the opposite effect.
What if you want the image in the center? In this case, the steps to follow are also very simple, since you only have to wrap the image using tags center. The code would look like this:
The “src” serves as an indication of the image path and the “alt” is the one that gives information to the web page about the name of the file. don’t forget about to assign width and height to the image as follows:
height=”300” width=250”
Contents
Center images with HTML and middle
Another of the fastest alternatives to center images is to use a middle alignment. The code would be as follows:
align=”middle”>
Likewise, if you want to add text, the code should be written like this:
Text align=”middle”> Text.
On the other hand, it is a good idea to know other types of values than the attribute align can take within images tag. They are relative to vertical alignment and help to get more accurate results. In this way, the relationship between the text and the image will be uniform and will have a better appearance. The additional values that correspond to the attribute align are the following:
- Top: This value adjusts the image to the top of the line specifically. As a result, if one image is taller than another, both are presented at the top edge with a similar height.
- Bottom: is a value that automatically adjusts the under the image to the text for better viewing.
- absbottom: similar to the previous one, except that this value places the bottom edge of the image at the same level as the lowest element of the entire line.
- Middle: is a value that matches the vertical middle of the image with the base of the text line, which creates more uniformity.
- absmiddle: this value is intended to fit image to absolute middle present in the established line.
It is true that learning to manage all these options is somewhat complicated, but with practice it will be easier and easier. After all, HTML is an easy language to learn and master.
Since the arrival of HTML5, the attribute align has become obsolete and currently it is best to use CSS to align images. A combination of HTML and CSS code is made that, although it may seem difficult at first, in practice it is much easier than it seems.
For center an image with cssyou must start with the HTML code, following an example like this:
With this you have put the class to the image, which receives the name of centered. Later, it will serve you to give it the style you prefer in the CSS. The code for the image to be centered would be the following:
.centered{
margin:10px auto;
display:block;
}
Another of the effective codes for align an image in HTML with CSS is:
.centered{
margin-left: auto;
margin-right: auto;
}
What to do if it doesn’t work?
Although this is sufficient in most cases, the code may not be recognized by the browser. If this happens to you, you must tell the browser that the image is a block element. As a result, it can be centered just like an additional block.
It will be given an auto margin, which is enough to make it look right. The code to use is the following:
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
