Html for centering image

5 ways how to center an image in CSS

In this article, we will look at 5 different ways on how to center an image in CSS or to center any non-block element.

Human beings are attracted to symmetry, even the basic definition that your mind conceives about beauty is symmetry.

So as a web developer you might want your webpage to follow symmetry and look beautiful. For this one task you have is to center an image horizontally and/or vertically.

We have discussed the following 5 different ways to center an image in CSS.

1. Center an image using the margin property

Using margin property you can horizontally center any block-level HTML element. Set margin-left: auto and margin-right: auto or simply margin: 0 auto and your element will get aligned to center horizontally.

But an image is an inline element by default so you can not directly apply this to an image in HTML.

Follow the following steps:

1. First, set display: block to the image element to make the image a block-level element because margin auto will only work on block-level element.
2. Second, set the left and right margins of the image to «auto» by margin: 0 auto .
3. Finally, set the width of the image smaller than it’s parent element because if the image is bigger than it’s parent element then it doesn’t worth centring it. Let’s set width: 60% for the safe side.

Now, adding ‘center’ class to the ‘img’ element.

2. Center an image using text-align

Yes, you can align an image horizontally to center using the text-align property.

Since text-align property works on block level element so warp your image with a which is block level element and set text-align: center to the element.

Make sure the size of the viewport is smaller than the image width unless it won’t work so you can set some width to the image.

3. Center an image using flexbox

Using the above 2 methods you can center an image only horizontally but using CSS flexbox you can center the image both horizontally and vertically.

To use flexbox for this purpose you first need to wrap the image in an element and set the display property to «flex» to create a flex container.

Now, to center the image horizontally or vertically you need to use 2 flexbox property justify-content and align-items respectively.

center image horizontally using flexbox

To center the image horizontally use the justify-content property of CSS flexbox. The justify-content align the items of the flex container in the X-axis.

Set justify-content: center to the flex container.

Make sure the width of the image is smaller than the viewport. Here we set the width of the image to 60%.

Now set the ‘center’ class to the div element.

center image vertically using flexbox

To center the image vertically use the align-items property of CSS flexbox. The align-item property aligns the items of the flexbox in the Y-axis which will vertically align the image.

Set align-items: center to the element.

Here we also set some height of element greater than the height of the image to visualize properly.

Now set the ‘center’ class to div element.

4. Center image using position and transform

Using position absolute and then applying transform property on it is a classic method to center elements in CSS.

Using this you can center images or any element both horizontally and vertically.

For this, to work there must be a parent element of the image with position relative.

center image horizontally using position and transform

Step 1 : Wrap the image element in a div element and set position: relative to it. Also, set some height greater than the image height for it to work properly.

Step 2 : Now set position: absolute to the image which will move the image to start from (x, y): (0, 0) of its parent element.

Step 3 : Due to absolute position the element within can float easily so set left: 50% . Now the element will start from (x, y) : (50%, 0).

Step 4 : Finally translate the image 50% of its size in negative X direction using transform: translateX(-50%) this will align the image center horizontally.

Here is the complete code to align horizontally using position absolute and transform property.

Now set the ‘center’ class to div element.

center image vertically using position and transform

To align the image vertically you have to shift 50% from to and then translateY 50% in negative. As the parent element is already positioned, relative.

Step 1 : Set position: absolute to the image. Image will float to (x, y) : (0, 0) of its parent element.

Step 2 : Shift image 50% from top top: 50% . Now the element will start from (x, y) : (0, 50%).

Step 3 : Finally translate the image 50% of its size in negative Y direction using transform: translateY(-50%) this will align the image center vertically.

Here is the complete code to align vertically using position absolute and transform property.

Now set the ‘center’ class to div element.

5. Center image using center element (deprecated)

Using element is deprecated and not used in HTML5 but some browser still supports it.

To center the image horizontally wrap the image in element.

Note : Using element is not recommended.

Conclusion

As a web-developer you constantly need to align images horizontally and vertically, we discussed here 5 different techniques to center an image using CSS.

Источник

How to Center an Image in HTML?

If you have worked with HTML and CSS, you know how frustrating it is to deal with images in HTML, especially how to center an image in HTML. The problem is that the tag is an inline element and works differently than the block elements which makes it difficult to center align it that easily. If you are a beginner trying to learn HTML and CSS, and if dealing with image alignment seems like the biggest problem in your life, you are not alone. Many developers struggle with image handling in general, let alone image alignment. But you don’t have to worry because in this article we will show all the different methods which will answer the question, How to center an image in HTML?

Pre-requisites

Before we move ahead, you should have prior knowledge about some basic concepts of HTML especially inline and block elements. You can learn more about them here —

How to Center an Image in HTML

We use tags in HTML for adding images to our webpage, but the problem is that the tag is an inline element which makes it difficult to align it that easily. We can use any of the following methods and perfectly center an image in HTML.

• We can use the text-align property of the style attribute and set it to center .
• We can align our image by converting it into a block-level element
• We can use the tag to align one particular image.
• We can use the CSS flexbox feature
• We can also use the CSS grid feature

Output:

As we can see our image is perfectly centered with respect to our page. Now let’s understand each method in a little more depth.

Method 1: Using the Style Attribute

We can center an image in HTML using the text-align property in the style attribute and setting it as center. This will center everything inside the tag.

NOTE: There’s a small problem, the text-align property works only on block elements and img is an inline element. Well, a quick fix is to wrap the img tag inside of a block element such as a div and use the text-align property on that div to center the image.

NOTE: We have already set the text-align property as center in the HTML code. Below provided CSS is added just to make the output look better.

Output:

Method 2: Converting the img Tag to a Block-Level Element

Another way to center an image in HTML is to convert the img tag which is an inline tag into a block-level tag. This can be done by setting the display property in CSS to block. Once that is done, We can simply set the margin property to auto, which divides all the space equally on the left and right sides of our image, centering it perfectly.

Output:

Method 3 : Using the tag

If we want to center one particular image on the page, we can use the tag. We can wrap the img tag inside of the tag and it will center that particular image.

NOTE: This method might not work on some browsers and is deprecated as it may have been removed from the relevant web standards or maybe in the process of being removed.

NOTE: We have already used the center tag in the HTML code. Below provided CSS is added just to make the output look better.

Output:

Method 4: Using CSS Flexbox

The introduction of the flexbox made it much easier to control the position of the images and center them properly. All we need to do is to put our image inside of a container such as a div and set the display property for that container as flex . Then just select the justify-content property as center . Let’s look at an example.

Output:

Method 5: Using CSS Grid

We can center our image using the CSS grid by wrapping our image inside of a container such as a div and then setting the display property of that container as grid . Then set the place-items property as center and we are done. Let’s look at an example.

Output:

Conclusion

• tag is an inline tag.
• We can wrap the img tag inside a block type tag such as a div tag and set the text-align property as center.
• We can covert the inline img tag into a block tag by changing the display property to block.
• We can also wrap our img tag inside of a center tag and that will center that particular image.

Источник

How to center an image in HTML? – Top 3 ways to make your website look amazing

We can center images horizontally or vertically. There are many ways to center an image but we’ll try to keep it simple in our examples.

How to center an image in HTML horizontally

First, we’ll have to paste the image into the HTML code:

We can define the properties of the elements we need to center more easily if we put them in a single class.

In our case, the image was put in a class called “center”, so we can refer to it (and to other elements that need centering) with the .center selector.

.center  display: block; margin-left: auto; margin-right: auto; width: 50%; >

Centering with CSS:

To center the image, we have to define it as a block element. This way, its code goes in a new line, and we can define its margins.

If we define both margins as auto , the image will be centered. You can’t center an image with a width of 100%, because in that case, the image will fill up the whole screen.

How to center an image in HTML vertically

We have chosen a simple method to center an image vertically, using flexbox.

Pasting the image into the HTML code:

The image was placed inside a div element, and we’ll use the CSS rules for centering on this element.

How to center an image in HTML vertically in CSS:

div  display: flex; align-items: center; height: 600px; > img  width: 50%; height: 350px; >

We’ll need the align-items: center statement to center the image vertically.

How to center an image in HTML horizontally and vertically

If we add the image to a , just like previously, we can center it both horizontally and vertically.

The lines of HTML code needed to do this are the following:

We also need to add the following CSS code to our project:

div  display: flex; justify-content: center; align-items: center; height: 800px; > img  width: 50%; height: 400px; >

This method also uses flexbox: the justify-content: center line handles horizontal centering while the align-items: center line handles vertical centering.

If you’d like to see more programming tutorials, check out our Youtube channel, where we have plenty of video tutorials in English.

In our Programming Tutorials series, you’ll find useful materials which will help you improve your programming skills and speed up the learning process.

HTML and CSS:

Other materials:

Источник