Меню Zurb Foundation 6, выравнивание по правому краю, упрощенный способ выравнивания по центру на небольших устройствах

Question

Я использую основу ZURB, и мне интересно, существует ли более простой способ выравнивания пунктов меню на небольших устройствах.

В настоящее время мой HTML-код выглядит следующим образом:

<ul class="vertical menu align-right">
    <li><a title="My God, It's Full of Stars">Link 1</a></li>
    <li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

Как вы можете видеть, на всех устройствах мое меню выравнивается по правому краю, но на меньших устройствах мне бы хотелосьдля центрирования этих элементов я знаю, что в ZURB 6 есть много классов и методов данных, которые заставляют вещи работать по-разному в зависимости от размера точки обзора.

Я пробовал использовать оба:

1. <ul class="vertical menu align-right" data-responsive-menu="small-align-center">
2. <ul class="vertical menu align-right small-align-center">

Которые оба не работают!к сожалению.

Полагаю, я мог бы использовать:

/* Small only */
@media screen and (max-width: 39.9375em) {

    .menu.align-right {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .menu.align-right.vertical li {
        text-align: center;
    }

}

Я бы предпочел сохранить CSS как можно более минимальным и задаться вопросом, существует ли метод без добавления в CSS.Несмотря на то, что документация находится на сайте ZURB 6, не все перечислены.

Вопрос (ы):

Есть ли способ выравнивания пунктов меню с использованиемКЛАСС или ДАННЫЕ на маленьких, мультимедийных и больших устройствах?

Answer 1

Я получил это, при правильном использовании классов flex box, путем непосредственного выравнивания текста через сами теги <a>.Поскольку теги <a> занимают 100% ширины меню, вы можете контролировать выравнивание текста внутри них непосредственно по тегу <a>.

Вы должны задать им выравнивание по умолчанию text-center, чтобы оно центрировалось на всех размерах экрана, пока не достигнет указанного medium-text-right, а затем выровняется по правому краю для всех размеров, средних и более.

<ul class="vertical menu medium-align-right">
    <li><a class="text-center medium-text-right" title="My God, It's Full of Stars">Link 1</a></li>
    <li><a class="text-center medium-text-right" title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li><a class="text-center medium-text-right" title="Klaatu barada nikto">Link 3</a></li>
</ul>

Пожалуйста, дайте мне знать, если этот ответ ближе к достижению того, что вы ищете!

Answer 2

Вам просто нужно добавить small-only-text-center в li, это повлияет на ваш li только на небольших устройствах. Попробуйте это, я надеюсь, это поможет вам. Спасибо

Zurb Foundation также предоставляет надлежащую документацию для всех коммунальных услуг - https://foundation.zurb.com/sites/docs/v/5.5.3/utility-classes.html

Фонд 5:

<ul class="vertical menu align-right">
    <li class="small-only-text-center"><a title="My God, It's Full of Stars">Link 1</a></li>
    <li class="small-only-text-center"><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li class="small-only-text-center"><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

Я думаю, что Foundation 6 еще не очень зрелый. Там medium-text-right работает напротив для большего экрана. Ниже фрагмент кода будет работать в соответствии с требованием. Попробуйте это, я надеюсь, это поможет вам. Спасибо

Фонд 6:

<ul class="vertical menu">
    <li class="medium-text-right text-center"><a title="My God, It's Full of Stars">Link 1</a></li>
    <li class="medium-text-right text-center"><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li class="medium-text-right text-center"><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

Я также создал основную скрипку, используя фундамент 6. Пример скрипки

Foundation Последняя версия (6.5.3) CDN ссылки с использованием в примере Fiddle https://foundation.zurb.com/sites/docs/installation.html#cdn-links

Answer 3

Единственный способ сделать это без правил для точек останова - отказаться от правил flex и использовать более простые правила выравнивания текста, которые допускают некоторые компоненты имен на основе точек останова:

<ul class="vertical menu small-12 text-center medium-text-right">
  <li><a title="My God, It's Full of Stars">Link 1</a></li>
  <li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
  <li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

Это недостаточно хорошо документировано, но поскольку Foundation основывается на философии, ориентированной на мобильные устройства, .text-center применимо к небольшим областям просмотра. Класс, определенный для точки останова .medium-text-right, затем вступает во владение в средних окнах просмотра и будет также переноситься на большие размеры.

Если бы в другом случае были важны служебные классы flex, у вас не было бы выбора, кроме как писать медиазапросы или, если используется SASS, использовать точку останова.

Вот рабочая демонстрация Codepen , чтобы показать эффект в действии.

Answer 4

Вы пытались использовать класс align-center?

<ul class="vertical menu align-center">
    <li><a title="My God, It's Full of Stars">Link 1</a></li>
    <li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

https://codepen.io/fontophilic-the-vuer/pen/VNamjy