Align Foundation 5 tabs in the middle of the screen

css, html, zurb-foundation

Solution

I got the tabs to center and play nice with foundation through the following SCSS:

ul.tabs {
    text-align: center;
    li {
        float: none !important;
        display: inline-block;
    }
}

If you're using plain CSS:

ul.tabs {
    text-align: center;
}

ul.tabs li {
    float: none !important;
    display: inline-block;
}

Benefits: You don't need to specify a width, which can cause problems with responsiveness. You also don't need an extra div. This solution is specific to foundation as well.

Explaination: Normally, adding text-align: center; to the ul's css would center the li elements. But, foundation's default css adds float: left to li's inside ul.tabs. We clear this with float: none !important and realign the li elements in an inline block.

Problem

Im trying to align the out of the box Tabs which come with Foundation 5. For some reason by default they are aligned to the left and i cant figure out how i can get these to align to the center of the screen. The code i am working with is fairly simple (the bog standard tab markup) Example: ``` <ul class="tabs" data-tab> <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li> <li class="tab-title"><a href="#panel2-2">Tab 2</a></li> </ul> <div class="tabs-content"> <div class="content active" id="panel2-1"> <p>First panel content goes here...</p> </div> <div class="content" id="panel2-2"> <p>Second panel content goes here...</p> </div> </div> ``` Live Demo: http://jsfiddle.net/7YxLg/ So what i am aiming for is for the two tabs to be centered in the middle of the screen instead of to the left can this be done?

Original source