Difference between Text-Align-Center and Margin-Auto
Tags: css, webdev, webcomponents
Published: 2022-03-08 17:26:56

In **CSS** to center an element horizontally, you might think that **Flex** and **Grid** can solve your problem. BUT,

`text-align: center` or `margin: auto` can also do the trick 🪄

Therefore, knowing the difference between `text-align: center` and `margin: auto` will help a lot, it's also a bit tricky in **CSS**, let me explain their similarities:

#### Both properties are:
1. used **ONLY** in block elements.
2. used **ONLY** to specify horizontal alignment.

#### The difference:
- `margin: auto` used to center an HTML element.
- `text-align: center` used to center an element content.

#### By the way,

- HTML Element is everything from the start tag to the end tag including HTML tags.
- Element Content is everything between the tags.

It looks a bit overwhelming 😅, look at the picture.


![sirkif_css.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1646693759689/G1mTaNeZ_.png)


```css
#first-green-box {
    background: green;
    text-align: center;   
}
``` 

- First green box we have a width of 100%, because by default a block element takes up the full width available of its parent, in our case, is the **Body element**, therefore, the element content, the text, will be centered horizontally within its container, opening and closing tag ( `<p></p>` ).

If we centered the element content to the right, will get this result:

```css
#first-green-box {
    background: green;
    text-align: right;   
}
``` 

![text-align-right.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1646738213773/2MLqKBkhd8.png)

```css
#second-green-box {
    width: 500px; // new
    background: green;
    text-align: center;   
}
``` 

- Second green box is the same as the first, we are just showing and confirming that `text-align: center` depends on the width of its container, opening and closing tag, not on the **Body element**.

From it, we conclude that the text inside our **`<p>` Tag** will be centered horizontally within the width of opening and closing tag.

```css
#third-green-box {
    width: 500px; 
    margin: auto; // new
    background: green;
    text-align: center;   
}
``` 

- Third box, if we added a specific width to our HTML element, and we want to center it within its parent horizontally, **I Emphasize** here we want to center an element horizontally the **HTML Element**, not the **Element Content**, not within its opening and closing tag. we want to center the **HTML Element** itself within another **HTML Element**.

In other words, make a block element in the center of another block element.

In this case, we will use the power of `margin: auto`, no **Flex**, no **Grid** only auto, auto, can solve our problem. Therefore, left and right margins will be split equally.

Notice if we remove **text-align**, the element content will return to the default value of text-align, left, and will have no effect on the HTML element, to be in the center.

```css
#third-green-box {
    width: 500px; 
    margin: auto;
    background: green;
}
``` 

![margin-auto.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1646741213062/m_wNhiK-t.png)

We conclude that `margin: auto` has an effect on the HTML element, not on the element content, this is why when we apply `margin: auto` on HTML element that its full-width depends on Body element, will not work, nor will it have any effect.

## Summary

In a nutshell, if you're trying to center an element horizontally and it doesn't work for you, ask yourself three things:

1. Is this element an HTML element or Element Content?

2. Does this element have a specific width or not?

3. What is its parent?

To be honest with you, the key to this is if you understand the difference between **HTML Element** and **Element Content**, you're good to go.

The full code for this image below is available on [CodePen](https://codepen.io/sirkif/pen/ExbzNWj).

![text-align-and-margin-auto.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1646746311912/rOlmS0rvF.png)