Css centered images with

How to Use CSS to Center Images and Other HTML Objects

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

Christine Baker is a marketing consultant with experience working for a variety of clients. Her expertise includes social media, web development, and graphic design.

What to Know

• To center text, use the following code («[/]» denotes a line break): .center < [/] text-align: center; [/] >.
• Center blocks of content with the following code («[/]» denotes a line break): .center < [/] margin: auto; [/] width: 80em; [/] >.
• To center an image («[/]» denotes a line break): img.center < [/] display: block; [/] margin-left: auto; [/] margin-right: auto; [/] >.

CSS is the best way to center elements, but it can be a challenge for beginning web designers because there are so many ways to accomplish it. This article explains how to use CSS to center text, blocks of text, and images.

Centering Text With CSS

You need to know only one style property to center text on a page:

With this line of CSS, every paragraph written with the .center class will be centered horizontally inside its parent element. For example, a paragraph inside a division (a child of that division) would be centered horizontally inside the

Here’s an example of this class applied in the HTML document:

When centering text with the text-align property, remember that it will be centered within its containing element and not necessarily centered within the full page itself.

Readability is always key when it comes to website text. Large blocks of center-justified text can be difficult to read, so use this style sparingly. Headlines and small blocks of text, such as teaser text for an article, are typically easy to read when centered; however, larger blocks of text, such as a full article, would be challenging to consume if fully center-justified.

Centering Blocks of Content With CSS

Blocks of content are created by using the HTML

.center margin: auto;
width: 80em;
>
 

This CSS shorthand for the margin property would set the top and bottom margins to a value of 0, while the left and right would use «auto.» This essentially takes any space that is available and divides it evenly between the two sides of the viewport window, effectively centering the element on the page.

Here it is applied in the HTML:

As long as your block has a defined width, it will center itself inside the containing element. Text contained in that block will not be centered within it but will be left-justified. This is because text is left-justified as the default in web browsers. If you want the text centered as well, you could use the text-align property covered earlier in conjunction with this method to center the division.

Centering Images With CSS

Although most browsers will display images centered using the same text-align property, it’s not recommended by the W3C. Therefore, there’s always a chance that future versions of browsers could elect to ignore this method.

Instead of using text-align to center an image, you should tell the browser explicitly that the image is a block-level element. This way, you can center it as you would any other block. Here is the CSS to make this happen:

img.center display: block;
margin-left: auto;
margin-right: auto;
> 

And here is the HTML for the image to be centered:

You also can center objects using inline CSS (see below), but this approach is not recommended because it adds visual styles to your HTML markup. Remember, style and structure should be separate; adding CSS styles to HTML will break that separation and, as such, you should avoid it whenever possible.

Centering Elements Vertically With CSS

Centering objects vertically has always been challenging in web design, but the release of the CSS flexible box layout module in CSS3 provides a way to do it.

Vertical alignment works similarly to horizontal alignment covered above. The CSS property is vertical-align, like so:

.vcenter vertical-align: middle;
> 
 

All modern browsers support this CSS style. If you have issues with older browsers, the W3C recommends that you center text vertically in a container. To do so, place the elements inside a containing element, such as a div, and set a minimum height on it. Declare the containing element as a table cell, and set the vertical alignment to «middle.»

For example, here is the CSS:

.vcenter min-height: 12em;
display: table-cell;
vertical-align: middle;
>
 

Источник

How to Center an Image Vertically and Horizontally with CSS

Cem Eygi

Many developers struggle while working with images. Handling responsiveness and alignment is particularly tough, especially centering an image in the middle of the page.

So in this post, I will be showing some of the most common ways to center an image both vertically and horizontally using different CSS properties.

Here’s an interactive scrim about how to center an image vertically and horizontally:

I’ve gone over the CSS Position and Display properties in my previous post. If you’re not familiar with those properties, I recommend checking out those posts before reading this article.

Here’s a video version if you want to check it out:

Centering an Image Horizontally

Let’s begin with centering an image horizontally by using 3 different CSS properties.

Text-Align

The first way to center an image horizontally is using the text-align property. However, this method only works if the image is inside a block-level container such as a :

Margin: Auto

Another way to center an image is by using the margin: auto property (for left-margin and right-margin).

However, using margin: auto alone will not work for images. If you need to use margin: auto , there are 2 additional properties you must use as well.

The margin-auto property does not have any effects on inline-level elements. Since the tag is an inline element, we need to convert it to a block-level element first:

Secondly, we also need to define a width. So the left and right margins can take the rest of the empty space and auto-align themselves, which does the trick (unless we give it a width of 100%):

Display: Flex

The third way to center an image horizontally is by using display: flex . Just like we used the text-align property for a container, we use display: flex for a container as well.

However, using display: flex alone will not be enough. The container must also have an additional property called justify-content :

The justify-content property works together with display: flex , which we can use to center the image horizontally.

Finally, the width of the image must be smaller than the width of the container, otherwise, it takes 100% of the space and then we can’t center it.

Important: The display: flex property is not supported in older versions of browsers. See here for more details.

Centering an Image Vertically

Display: Flex

For vertical alignment, using display: flex is again really helpful.

Consider a case where our container has a height of 800px, but the height of the image is only 500px:

Now, in this case, adding a single line of code to the container, align-items: center , does the trick:

The align-items property can position elements vertically if used together with display: flex .

Position: Absolute & Transform Properties

Another method for vertical alignment is by using the position and transform properties together. This one is a bit complicated, so let’s do it step by step.

Step 1: Define Position Absolute

Firstly, we change the positioning behavior of the image from static to absolute :

Also, it should be inside a relatively positioned container, so we add position: relative to its container div.

Step 2: Define Top & Left Properties

Secondly, we define the top and left properties for the image, and set them to 50%. This will move the starting point(top-left) of the image to the center of the container:

Step 3: Define the Transform Property

But the second step has moved the image partially outside of its container. So we need to bring it back inside.

Defining a transform property and adding -50% to its X and Y axis does the trick:

There are other ways to center things horizontally and vertically, but I’ve explained the most common ones. I hope this post helped you understand how to align your images in the center of the page.

If you want to learn more about Web Development, feel free to visit my Youtube Channel for more.

Источник