DEV Community

Haruka Kato
Haruka Kato

Posted on

text-align: center does not work...

I wanted those two boxes to be in the center but I couldn't apply 'text-align:center'.

I was doing some search and I found out for block elements such as

<p> <div> <h1>〜<h6>

the default is 'display:block' so you can't place the element itself in the center (text and image in the element will be centered).

So here is what you wanna do.

margin: 10px auto;

Enter fullscreen mode Exit fullscreen mode

This means margin-right equals margin-left so it can place the element in the center!

CSS can be tricky and I sometimes spend a lot of time trying to figure it out but I hope I will get used to more rules.

Hope this can be helpful for you!

Top comments (2)

Collapse
 
tayyabullah101 profile image
Tayyab Ullah Khan

Good effort, these things can be confusing in the beginning but once you get a hang of it you will feel like a pro!

Collapse
 
harukakato35 profile image
Haruka Kato

Thank you! I thought it's a good idea to leave how I figured out on Dev for myself and for others!