Блог

Я пытаюсь выровнять готовые вкладки, которые поставляются с Foundation 5. По какой-то причине по умолчанию они выровнены по левому краю, и я не могу понять, как я могу выровнять их по центру экрана. Код, с которым я работаю, довольно прост (стандартная разметка вкладок bog)

Пример:

 <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>
  

Живая демонстрация:

http://jsfiddle.net/7YxLg/

Итак, к чему я стремлюсь, так это к тому, чтобы две вкладки располагались по центру в середине экрана, а не слева, можно ли это сделать?

Я расположил вкладки по центру и хорошо взаимодействовал с foundation с помощью следующих 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. Это решение также специфично для foundation.

Объяснение: Обычно добавление text-align: center; в css ul приводит к центрированию элементов li. Но css foundation по умолчанию добавляет значение float: left для вкладок li внутри ul.tabs. Мы очищаем это с помощью float: none !важно и перестраиваем элементы li во встроенном блоке.

Конечно, используя магию автоматического выравнивания полей.

Определите общую ширину элементов, затем заключите их в div.

CSS:

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

Затем в HTML поместите весь свой код в этот div.