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;

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!

Comments

[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!

[Haruka Kato]

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