How to center text in grid box, with background color

HTML-CSS
1

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.
Thanks.

1 Like
2

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
3

Hey,

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

padding-top:18px;
text-align: center;
1 Like
4

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

5

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!

7

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
8

Thank you so much!!! :smiley: