在屏幕中间对齐Foundation 5选项卡 [英] Align Foundation 5 tabs in the middle of the screen

问题描述

我试图对齐的开箱即用基础5附带的标签。由于某些原因，默认情况下，它们对齐到左边，我不能弄清楚如何让这些对齐到屏幕的中心。我使用的代码相当简单（bog标准标签标记）

示例：

 < ul class =tabsdata-tab> 
< li class =tab-title active>< a href =＃panel2-1>标签1< / a>< / li& 
< li class =tab-title>< a href =＃panel2-2>标签2< / a>< / li& 
< / ul> 
 
< div class =tabs-content> 
< div class =content activeid =panel2-1> 
< p>第一个面板内容到这里...< / p> 
< / div> 
< div class =contentid =panel2-2> 
< p>第二个面板内容到这里...< / p> 
< / div> 
< / div> 
  

现场演示：

http://jsfiddle.net/7YxLg/

那么什么我的目标是让两个标签在屏幕中间而不是左边的中心可以这样做？

解决方案

通过以下SCSS，我获得了标签中心和基础：

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

如果使用纯CSS：

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

好处：宽度，这可能导致响应性的问题。你也不需要一个额外的div。

到ul的css将中心li元素。但是，Foundation的默认CSS增加了float：left到li的里面ul.tabs。我们用float：none！来清除这个，重要的是在一个内联块中重新对齐li元素。

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?

解决方案

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.

这篇关于在屏幕中间对齐Foundation 5选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！