CODEWITHSUNDEEP
spry
Aasim Azam
Aasim Azam

Reputation: 508

how to center the tabs in a spry tabbed panel?

Is there a way to put the tabs of a spry tabbed panel in the center?

     +------+------+
     |Tab  1|Tab 2 |
     +------+------+
+-----------------------+
|         panel         |
|                       |
+-----------------------+

At the moment they are on the left by default.

Upvotes: 0

Views: 418

Answers (1)

pastorello
pastorello

Reputation: 1022

According to this example: http://adobe.github.io/Spry/samples/tabbedpanels/tabbed_panel_sample.htm

<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
    <li class="TabbedPanelsTab TabbedPanelsTabSelected" tabindex="0">Tab 3</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
</ul>

Just work on css, adding these rules to center the tabs menu (i tried on the fly with firebug):

.TabbedPanelsTabGroup{
    text-align: center;
}
.TabbedPanelsTab{
    display: inline-block;
    float: none;
}

Upvotes: 0

Related Questions