Search…

X3 Photo Gallery Support Forums

Search…
 
metallissimus
Experienced
Topic Author
Posts: 332
Joined: 17 Oct 2019, 06:54

Centering buttons

10 Mar 2023, 07:38

Hi,

I can't figure out what's the difference between some buttons on my home page which behave differently.

If you go to https://hochzeiten.danielbollinger.de/ on mobile (or mobile simulation) you can see that the first button is centered, the following two are not.
I want them all to be centered and I don't understand why the latter two are left aligned. The only difference I could identify is that the first button's parent element has class .v-centered-button, but wrapping the other button in a div with the same class didn't help.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 14012
Joined: 30 Sep 2006, 03:37

Re: Centering buttons

10 Mar 2023, 09:10

All I can see, is that in the second button, you are using some custom class v-centered-button, and this is making a mess. If you remove that class, you will find that the button inherits the alignment of the column, which in this case is LEFT. The top button however is centered, because the column itself is set to align CENTER.

Grids can be difficult to work with, as I'm sure you are aware, with loads of classes that apply different styles and alignments across different screen sizes. For me, if I want to center a button independently from the text or column that it is in, I would just add the button or <a> inside a box:

Code
<div style="text-align: center">
  <button>this button is always centered</button>
</div>
In other words, this means you can align buttons inside the block independently from the container.

There are some classes in your code that I don't quite recognize at first glance, making it hard to understand. As for the last button, it's inside a column that is centered. Although the column itself is centered (on screen), the content inside the column is left-aligned, and the button is therefore aligned left, relative to the column.

As above, this can be resolved by adding your button inside a box with text-align: center.
 
metallissimus
Experienced
Topic Author
Posts: 332
Joined: 17 Oct 2019, 06:54

Re: Centering buttons

10 Mar 2023, 12:12

mjau-mjau wrote:
Code
<div style="text-align: center">
  <button>this button is always centered</button>
</div>
I knew there had to be some easy way to achieve this, thank you.

Regarding the mess: I have to admit I have lost track of my modifications. I figure something out and "hack" it to the desired result and months later I can't remember everything and have to figure things out all over again.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography