Align Foundation 5 tabs in the middle of the screen

问题

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?

回答1:

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.

回答2:

Sure, using the magic of auto-margins.

Figure out the overall width of the elements, then encase the lot in a div.

CSS:

#tabsDiv
{
    width:250px;
    margin:0 auto;
}

Then in the HTML, put all your code into that div.

来源：https://stackoverflow.com/questions/24548990/align-foundation-5-tabs-in-the-middle-of-the-screen