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.
X3Photo Gallery Forums
X3 Photo Gallery Support Forums
Centering buttons3 posts
-
-
metallissimus
Experienced
- Posts: 344
- Joined:
Re: Centering buttons
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:
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.
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>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
- Posts: 344
- Joined:
Re: Centering buttons
I knew there had to be some easy way to achieve this, thank you.mjau-mjau wrote:Code<div style="text-align: center"> <button>this button is always centered</button> </div>
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.