Zurb Foundation 6菜单向右对齐的简便方法，可在小型设备上使居中对齐

Question

我正在使用ZURB Foundation，我想知道是否存在一种在小型设备上对齐菜单项的简便方法。

目前，我的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站点上一样好，但并未列出所有内容。

问题：

在小型，中型和大型设备上，是否有使用CLASS或DATA对齐菜单项的方法？

Answer 1

您尝试过使用该类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