How to center text in grid box, with background color

Hi all, my first post here.
I’ve been trying to figure this out all day and feel so stupid because I think this should be a very easy fix.
Tried both grid and flex… But who knows, I may be using them all wrong.
Complete newb here by the way.

If you scroll all the way down, I want to have 3 hot pink buttons across, texts centered in each boxes.

When I DO succeed in centering them, the background colors shrink to the size of the text.
When I fill the background color of the boxes, then the texts are no longer centered. (current view)

help would be much appreciated.

1 Like

Hi, try to set “display” to “flex” and to set “justify-content”, “align-items” to “center”.
“justify-content” is the horizontal alignment.
“align-items” is the vertical alignment.

1 Like


Don’t feel demotivated, it happens with the best of us.
You’ve done a great job with the Tribute Page project :+1:

Try this for your solution-
In Your css styling for #tribute-link a.links
add the following to center align text in the button

text-align: center;
1 Like

This is what I tried too but it just won’t work… I don’t understand :frowning:

Thank you!!! It worked!! It’s not the way I would have wanted it to work, but it’s at least where I want it to be. I wanted to center things around using grid or flexbox alignments… I’ll just work with this for now and start working on making it look good on mobile now. Thank you!

nice post thank -P

1 Like

Noticed that your problem is already solved, but just dropping a comment to say Great Work on your tribute page! It looks awesome :slight_smile:

1 Like

Thank you so much!!! :smiley: