Archived topic
How to vertically allign a button?
8 replies · Started by Jusung on September 5, 2022
When you see this site, after scrolling down, you can see the 2 circles on each image.
1.
I wanna put it in the center vertically.
2.
Also, how can I add a button on the first image?
When you see the front page, there are 3 images, but I added buttones to only 2 images.
I wanna add the same button on the first page.
3.
Lastly, is there a way to make the circle square?
Thank you!
Hi there,
1. Select the Container Block and set the Vertical Alignment to center.
2. Remove the Page Hero from the Header Element.
Just use the Header Element to merge the site header.
Then you can just add the first section into your page content like the other sections.
That way you can add buttons to that section too.
3. Is it the icon you want to change ?
1.
the Vertical Alignment to center is not working.
I think it is because I made the full screen height in the additional CSS.
So, I expect that I need to make the vertical center in the addtional CSS.
2.
I don't understand what you mean?
Do you mean I have to make the block -> header?
I made the merged one in the header elements and there is no way to add more images there.
3.
I mean the button. there are 2 buttones on the image and I wanna make it squre.
Lets deal with #2 first.
Delete ( or Quick Edit > Change Status to Draft ) on your current Header Element.
Then create a Header Element just for Merging the Site Header - see here:
https://docs.generatepress.com/article/transparent-header-and-navigation/
This will merge the header with the top of your page content.
It seems to be done now.
and now I need to set the full screen height again cuz the first page size should be different.
Also, Since I set the height of image in the Additional CSS, the vertical assign setting doesn't work.
On the first image, i gave 100 vh and it seems ok now.
and would the value be the same on mobile? (100vh)?
I need to change the location of the button now.
Hi Jusung,
Will you be adding other stuff in these Containers, or will it just contain the buttons?
I will have to add things, so I need to find other option.
Thank you anyway!
Alright! If you'll need assistance with regards to this, let us know and re-share the link to the site in question.
