Tabs Widget - Can Not Align Tab Center

Yii 2.0 General Discussions
1

Hi everybody!

How to align tab center instead of align left default.

I have configured following:

echo Tabs::widget([

‘options’=>[‘style’=>‘text-align:center;’],

‘items’=>[…]

]);

but i can not align tab center.

Anybody have any ideas?Thanks.

2

works for me tried your code here is the result

3

I presume you are talking about the entire tab content centered - instead of text inside the tab headers.

By default bootstrap includes a float:left - so you need to override the CSS.

However a simpler approach to fake this to some extent can be by wrapping in a container with left and right margin. For example:




echo '<div style="margin:auto 30%;">';

echo \yii\bootstrap\Tabs::widget([

'items'=>[

    [

        'label' => 'One',

        'content' => 'Anim pariatur cliche...',

        'active' => true

    ],

    [

        'label' => 'Two',

        'content' => 'Anim pariatur cliche...',

    ],

]]);

echo '</div>';

However this will just make the tab content shorter in the center of the page (but still will be floated left).

PS: I am in the process of creating an extended Tabs extension with other features and will release it soon.

4

Sorry for my unclear question.

I wonder that aligned tab headers to center widget container, not aligned center text inside the tab headers.

5

add this in your site.css and it should center align the tabs




.nav-tabs {

	text-align: center;

}

.nav-tabs > li {

	float: none;

	display: inline-block;

}
6

Great!Thanks