Elements Refuse to Center

Well the center HTML tag is deprecated and is replaced by the text-align property. However when you want to center a block element you have to write some code maybe 1-3 lines of CSS.
Could you please show me an example?

My website is in under construction mode. But it is a shortcode […….] if this is going to help.

Well I have to know the HTML src of the element that is created..

I reach this piece of code when I inspect: <div class=”pm-login-box pm-dbfl pm-radius5 pm-border”>

Not sure if this is what it is needed.
If you give me a brief instruction on how to get it, I will do it real quick.

Hm the problem is that I have to view the element , what is produced by the shortcode because I have to examine the element with the firebug addon and maybe give you a simple solution.

Could you please send me the problem’s URL when the site is live?

I unlocked the website. You are the first person to see it. ??
Here are the links:
https://haha.bg/registracia/
https://haha.bg/members/
https://haha.bg/vlez/

See that the box in each page is not centered.

• This reply was modified 6 years, 2 months ago by Damyan90.

Ok ,thanks a lot !

I will try to give a solution.
It will require some css actually.
I will come back in a while.

If it is css I might be able to do it myself. But isn’t this supposed to be happening simply with the “center” function from the page editor? It doesn’t look too functional to center every page element with css. Am I missing something?

Ok lets see. You have to write the CSS direct in the WordPress Customizer inside the Additional CSS tab.

1.https://haha.bg/vlez/

.pmagic{     
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

2. https://haha.bg/registracia/
The form is in the middle, as I now see without CSS.
3. https://haha.bg/members/
What exactly do you want to center?

3. I thought all the content on /members is displayed the same way as in /registracia
In this relation I thought it needs to be centered.

Why it is not working to center elements with the “center” button from the page editor? Should custom css code be added every time I want to center an element on a page e.g. shortcode or an image?

Well it is not as simple it seems.
Sometimes the center button of the editor really works. However some elements are created using more complex CSS so just the center is not button is not enough..
Most of the times it has to do with the element itself.

So, in the CSS you gave me what does the selector .pmagic{ stay for? Where did you get it from?

I found this selector when viewing the page and using the chrome developer tools to find out the ids and the classes the container uses.

So, this css will reflect only the first page I gave you?

Well try it , it tried and work on the 1. link
https://haha.bg/vlez/

The big form in the registration is centered. I am seeing it differently.