Centering img with css

How to Center An Image Horizontally and Vertically in CSS

How many times have you had to Google ‘how to center an image in CSS’? It has been too many times to count for me. As a result, I wanted make a snippet on all the ways you can center an image in CSS.

The purpose of the snippet post is so you can grab the code at the top of the post. This will allow you to quickly cut and paste the code you need to center CSS images.

For this snippet we are going to refer to the HTML below.

div class="img-container"> 
 
img class="lazyload .center" src="path/to/image" /> 
 
div> 

CSS Image Center Horizontally

Currently with CSS images there are three ways to center an image horizontally. I’ll go over the three ways, the pro’s and con’s for each so that you can center an image with CSS in any situation.

Center CSS Image with Text Align

.center  
 
text-align: center; 
 
> 

It is important to note with this method that the text-align property only works on block level elements.

Center CSS Image with Margin

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

Centering an image with margin:auto is a great way to get the job done. However, you need to ensure it is used with two other properties.

The first is display:block as the margin:auto property only works on block level elements. As, Img elements are inline elements you will need to convert them to block level elements.

The second property is the width property. In order for the margins to move to the center you need to ensure there is empty space. Therefore, you must set the width to less than 100%.

Center CSS Image Horizontally with Flex

.img-container  
 
display: flex; 
 
justify-content: center; 
 
> 
 
.img  
 
width: 50%; 
 
> 

Setting the parent container of the image to display:flex allows you to center the image horizontally. In order to move the image to the center of the container you must specify the justify-content property to have a value of center .

Like with the margin horizontal centering method, you need to ensure you set the image to less than 100% of the width of the parent container.

Just note with this method that everything else in the parent container will be centered horizontally.

Alright those three methods should allow you to center any image horizontally. Let’s look at how to center an image vertically.

CSS Image Center Vertically

Notably with CSS images there are two key ways to center an image vertically. I’ll go over the two ways, the pro’s and con’s for each so that you can center an image vertically with CSS in an situation.

Center CSS Image with Position Absolute

.img-container  
 
position: relative; 
 
> 
 
.center  
 
position: absolute; 
 
left: 50%; 
 
top: 50%; 
 
transform: translate(-50%, -50%); 
 
> 

To center a CSS image vertically, you can use the position property with a value of absolute on the img element. The first thing you need to do, is to set the parent container to have a position value of relative . This is a must and you can learn why in my ridiculously simple guide to the position property.

Next, you set the left and top properties to 50%. What this means is that you line up the left and top edges of the image with the center of the browser. However, this actually makes the image appear to be off-center.

Therefore, you use the transformation property with the translate method to move the div -50% along the x and y axis. This will have the image aligned nicely to the vertical center of the parent elements position on the page.

Center CSS Image Vertically with Flex

.img-container  
 
display: flex; 
 
align-items: center; 
 
> 
 
.center  
 
width: 50%; 
 
> 

As with the horizontal centering we can center an image using flex-box. This time in order to move the image to the center of the container you must specify the align-items property to have a value of center .

Like with the margin horizontal centering method, you need to ensure you set the image to less than 100% of the width of the parent container.

Again, with this method everything else in the parent container will be centered vertically.

Center CSS Image Vertically and Horizontally

So far we have seen how to center a CSS image either horizontally or vertically. But, we have not seen how to do both at once.

Let’s see how to center an image horizontally and vertically at the same time.

.img-container  
 
display: flex; 
 
justify-content: center; 
 
align-items: center; 
 
> 
 
.center  
 
width: 50%; 
 
> 

We can use flex-box to center an image horizontally and vertically. To do so we must use both the justify-content and align-items property on the parent container of the image. All we then have to do is give them both the value of center and bobs your uncle, that image is centered both horizontally and vertically.

These are the most common methods for centering an image both horizontally and vertically in CSS. In most cases, this will be enough for you to get your image to the position you want on the page. Of course there are other methods and I’d love for you to DM me on twitter to let me know what they are.

If you enjoyed this post you might also like my posts on…

Peter Lynch

Web Developer & Bootcamp grad who wants to learn as much as he can check me out on twitter.

Starting from the bottom newsletter

This newsletter is a record of my journey as an indie hacker, developer, entrepreneur, and human. Delivered straight to your inbox each Sunday.

Источник

HTML Center Image – CSS Align Img Center Example

Kolade Chris

If you’re making websites with HTML and CSS, you will be working with images a lot.

Developers often struggle with image alignment in CSS, especially when trying to figure out how to center an image.

Centering anything in CSS is not really a straightforward thing — especially for beginners. This is why people brag about being able to center a div. 🙂

Since the img element is an inline element, this makes it a little bit harder to center. But don’t worry, you can convert the image to a block element and then center it.

In this article, I’m going to show you 4 different ways you can align an image to the center.

Table of Contents

How to Center an Image With the Text Align Property

You can center an image with the text-align property.

One thing you should know is that the tag for bringing in images – img – is an inline element. Centering with the text-align property works for block-level elements only.

So how do you center an image with the text-align property? You wrap the image in a block-level element like a div and give the div a text-align of center .

How to Center an Image with Flexbox

The introduction of CSS Flexbox made it easier to center anything.

Flexbox works by putting what you want to center in a container and giving the container a display of flex . Then it sets justify-content to center as shown in the code snippet below:

P.S.: A justify-content property set to center centers an image horizontally. To center the image vertically too, you need to set align-items to center .

How to Center an Image with CSS Grid

CSS Grid works like Flexbox, with the added advantage that Grid is multidimensional, as opposed to Flexbox which is 2-dimensional.

To center an image with CSS Grid, wrap the image in a container div element and give it a display of grid . Then set the place-items property to center.

P.S.: place-items with a value of center centers anything horizontally and vertically.

How to Center an Image with the Margin Property

You can also center an image by setting a left and right margin of auto for it. But just like the text-align property, margin works for block-level elements only.

So, what you need to do is convert the image to a block-level element first by giving it a display of block.

Those 2 properties could be enough. But sometimes, you have to set a width for the image, so the left and right margin of auto would have spaces to take.

P.S.: You might not have to go as low as 40% for the width. The image was distorted at a 60+ percentage, that’s why I went as low as 40%.

I hope this article helps you choose which method works best for you in centering an image.

Kolade Chris

Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник

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.

Источник