Centering text and images with css

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;
>
 

Источник

CSS Vertical Align – How to Center a Div, Text, or an Image [Example Code]

Kolade Chris

Even with helpful tools like CSS Grid and Flexbox, centering elements in CSS remains notoriously challenging.

It’s been the subject of many jokes and memes, and when you successfully center something, you’ll want to brag about it.

Why is Centering CSS Elements So Hard?

CSS can be tricky to work with. For example, if you’re trying to align something horizontally OR vertically, it’s not that difficult.

You can just set text-align to center for an inline element, and margin: 0 auto would do it for a block-level element.

But issues arise on multiple fronts if you’re trying to combine both vertical and horizontal alignments.

In this tutorial, I will introduce you to three different methods to correctly center a div, text, or image in CSS.

How to Center an Element with the CSS Position Property

The CSS position property takes relative, absolute, fixed, and static (the default) as values. When set, you will be able to apply the top, right, bottom, and left properties to the element.

The combination of relative and absolute values can get a lot of things done, and so you can use it to center anything.

Take a look at the snippets below to see some examples.

How to center text with CSS positioning

 
 
I'm a Camper, and I'm vertically centered
 
 
 

* < margin: 0; padding: 0; box-sizing: border-box; >.container < position: relative; height: 400px; border: 2px solid #006100; >.centered-element

How to center an image with CSS positioning

* < margin: 0; padding: 0; box-sizing: border-box; >.container < position: relative; height: 400px; border: 2px solid #006100; >.centered-element

The above code has made the text and image centered vertically. To take care of both vertical and horizontal centering, we need to make a little tweak in the CSS. We’ll set the top property to 50%, and we’ll add a transform on both the X and Y axes.

* < margin: 0; padding: 0; box-sizing: border-box; >.container < position: relative; height: 400px; border: 2px solid #006100; >.centered-element

The text now looks like this:

And the image like this:

Note that I applied the transform property because the child (with the class of centered-element) was slightly off-center. translateY() pushes it to the center vertically and translate on both the X and Y-axis ( translate() ) pushes it to the center vertically and horizontally.

How to Center an Element with Flexbox in CSS

CSS Flexbox handles layouts in one dimension (row or column). With Flexbox, it is pretty easy to center a div, text, or image in just three lines of code.

Check the snippets below for examples.

How to center text with Flexbox

 
 
I'm a Camper, and I'm vertically centered
 
 
 

How to center an image with Flexbox

We took care of the vertical alignment in just two lines of code. To make the image and text horizontally centered, add in justify-content: center.

 
 
I'm a Camper, I'm now vertically and horizontally centered
 
 
 

The text now looks like this:

And the image like this:

How to Center an Element with CSS Grid

With Flexbox, it is pretty easy to center anything, right? But with CSS Grid, it is really easy to center anything, because two lines of code are enough to do it for you.

How to center text with CSS Grid

 
 
I'm a Camper, and I'm vertically centered
 
 
 

How to center an Image with CSS Grid

The above examples takes care of vertical centering for you. To get the text and image centered horizontally too, replace the align items with place items – a combination of both align-items and justify-content :

The text now looks like this:

And the image like this:

How to Center a Standalone Div, Text, or Image in CSS

The three methods above let you center a div, text, or image in a container. You can also center a standalone div, text, or image.

Let’s see how to do that now.

How to center a standalone div in CSS

How to center standalone text in CSS

I'm a Camper, and I'm centered
 

How to center a standalone image in CSS

img < display: block; margin: 0 auto; >/* Applies a display of block, a margin 0f 0 at the top and bootom, and auto on the left and right */ 

Conclusion

I hope this tutorial gives you enough knowledge about vertical alignment and how to center elements in CSS so it’s less of a hassle for you in your next project.

Thank you for reading, and keep coding.

Источник

CSS Layout — Horizontal & Vertical Align

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, and the remaining space will be split equally between the two margins:

This div element is centered.

Example

Note: Center aligning has no effect if the width property is not set (or set to 100%).

Center Align Text

To just center the text inside an element, use text-align: center;

Example

Tip: For more examples on how to align text, see the CSS Text chapter.

Center an Image

To center an image, set left and right margin to auto and make it into a block element:

Example

Left and Right Align — Using position

One method for aligning elements is to use position: absolute; :

In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.

Example

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Left and Right Align — Using float

Another method for aligning elements is to use the float property:

Example

The clearfix Hack

Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the «clearfix hack» to fix this (see example below).

Without Clearfix

With Clearfix

Then we can add the clearfix hack to the containing element to fix this problem:

Example

Center Vertically — Using padding

There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding :

Example

To center both vertically and horizontally, use padding and text-align: center :

I am vertically and horizontally centered.

Example

Center Vertically — Using line-height

Another trick is to use the line-height property with a value that is equal to the height property:

I am vertically and horizontally centered.

Example

.center <
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
>

/* If the text has multiple lines, add the following: */
.center p line-height: 1.5;
display: inline-block;
vertical-align: middle;
>

Center Vertically — Using position & transform

If padding and line-height are not options, another solution is to use positioning and the transform property:

I am vertically and horizontally centered.

Example

.center <
height: 200px;
position: relative;
border: 3px solid green;
>

.center p margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>

Tip: You will learn more about the transform property in our 2D Transforms Chapter.

Center Vertically — Using Flexbox

You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:

Example

.center <
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
>

Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.

Источник