Menu icon Foundation
Foundation 5: how to center tabs nav

Hey there,

I am using tabs in Foundation 5. The tabs navigation renders beautifully as always with Foundation but I would like to have them centered. Right now the navigation tabs are aligned to the left. How can I make it so it is centered?

.row
    .small-12.columns
        nav
            dl.tabs(data-tab)
                dd.active
                    a(href) About
                dd
                    a(href) Our Team
                dd
                    a(href) Clients
            

         

Screenshot from 2013 11 29 11 58 30

centertabsnav

Hey there,

I am using tabs in Foundation 5. The tabs navigation renders beautifully as always with Foundation but I would like to have them centered. Right now the navigation tabs are aligned to the left. How can I make it so it is centered?

.row
    .small-12.columns
        nav
            dl.tabs(data-tab)
                dd.active
                    a(href) About
                dd
                    a(href) Our Team
                dd
                    a(href) Clients
            

         

Screenshot from 2013 11 29 11 58 30
Francois over 5 years ago

A temporary solution is to use the grid inside the nav and have the tab links take all column width

HTML:

dl.tabs.row(data-tab)
    dd.active.small-4.columns
        a(href) About
    dd.small-4.columns
        a(href) Our Team
    dd.small-4.columns
        a(href) Clients
dl.tabs.row dd {
  text-align: center;
  padding: 0
}

Ankur Patel over 4 years ago

The solution by Francois does not solve the issue. Is there another way to center align the tabs?

Jeffrey Peck about 4 years ago

Also really looking forward to a solution!

Ben Siegfried about 4 years ago

It would be nice to know how to right-align them too.

René Sinnbeck about 4 years ago

This works for me

Set the .tabs to display:inline-block and the nav to text-align:center using css.

Rafi Benkual about 4 years ago