How to center align navigation links in footer

Question

I am learning CSS Grid and tried to build a layout with grid. I have used a nested grid in my footer which has navigation. The navigation is repeated both at the top as well as in the footer. I am not able to center align the navigation links in the footer section. The footer has a copyright info. which is center aligned, but the navigation next to it is not. I tried various things like text align: center, align-items, justify-items, justify-self, place-items etc. but it does not seem to work. If someone can suggest a fix, that would of great help. Here is the Glitch link to the code -
https://glitch.com/edit/#!/aarthie-css-grid-real-world-project

Answer 1

https://code.sololearn.com/Wa18A84a229A

Making display table and table cell, the container and element respectively.

And the copyright text is just a grid item which needed only a align-self: center.

Hi I read this to solve the problem:
https://css-tricks.com/centering-css-complete-guide/
the section: Is it a block level element? >>> Do you care if the element stretches the height of the container?
Because the a tag is inside of div.

There was other way in the inline element section but the clickable area of the link was only the centered content.

The properties you were trying are for grid container/items or flexbox container/items, and not the child of those grid/flex items. Thats why the copyright <h1> was easy to align.

Answer 2

Thank you very much for the solution. For some reason, whenever I run the code to see your output, my app crashes. I will try doing this on another device or try out your code on a code editor and find out more details.

Answer 3

Well, I opened up your code in my laptop and viewed the your code solution. However, I do not know whether display: table is the correct way to use in a nested grid since I have made the parent element, main-nav as a nested grid. Well, it works though. However, it is an interesting thing to use and practice. A thought passed through my mind about align-self usage on the child element after I posted this question though. I also tried one more thing, I tried to increase the padding on the copyright (footer) element and that also seemed to work even though it is not perfectly center aligned. I have not used display: table or table-cell much and have to try it out to get a better understanding of this. Another thing that came to my mind while creating this nested grid is that initially I thought why create two nested grids on the footer and tried to make just one nested grid of 5 columns with copyright area as 1 column and navigation of the footer as 4 columns but it did not work and I still trying to figure out why the five column nested grid on the footer did not work.

Answer 4

Well, I didn't even use the table-related properties. I fixed it by using align-self: center on the footer paragraph and it is fixed. Problem solved. Thanks for the align-self suggestion.

Answer 5

༄༂Deeproshan Kumar༂࿐ Thanks for your suggestion. Grid layout worked as well as the alignment is now fixed. I am now in the process of converting the same grid layout to one with flexbox.

Answer 6

In you web browser press Ctrl+Alt+i to open the developer tools. Best way to help you learn why u getting those problems. Its great help.
The content is surrounded by padding.
With help of dev tools especially Firefox u can check the limits of your grid or flex items and the padding margins involved.

Answer 7

Arturop Thanks. Yes you are correct. There was extra padding in the footer area which I removed and it got fixed.

Answer 8

haha yes it crashes sometimes ive heard. I do it in PC VSCode, just share in codeplayground. ✌️

Answer 9

Use CSS flexbox in this case that will be suitable for these kind of issue.
CSS grid is made for 2D layouts means when you are working with 2D layouts like gallery or blog post section then you can go through CSS grid.

Answer 10

I changed the grid layout to one with a flexbox, but when the links are hovered in the top navigation, the hover effect hovers the entire navigation bar, but in the footer navigation, the hover effect hovers only the links but not the whole navigation element. I am not able to figure out why because I have used the same style for both separated by a comma as selector. I checked the CSS syntax and could not find anything wrong. I thought it could be something to do with the height of the element and tried height: auto or height: 100% but that also did not help. If someone can suggest a fix for this minor thing, that will help. Find my code below.
https://code.sololearn.com/W2A050A506a1