我正在使用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有许多类和数据方法，可以根据视点大小以不同的方式工作。
我尝试过同时使用两者：
<ul class="vertical menu align-right" data-responsive-menu="small-align-center"><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 对齐菜单项？
在没有断点规则的情况下实现此目的的唯一方法是放弃 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 演示，用于展示实际效果。
您是否尝试使用类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
我通过<a>标签本身直接对齐文本，在正确使用 flex box 类的同时，让它工作了。由于<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>
请让我知道这个答案是否更接近实现您想要的！
您只需要添加small-only-text-centerli它只会影响您在小型设备上的li。试试这个，希望它能帮助你。谢谢
Zurb基金会还为所有公用事业提供适当的文档- 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 创建了基本小提琴。小提琴示例
基础最新版本 (6.5.3) 在小提琴示例中使用的 CDN 链接 https://foundation.zurb.com/sites/docs/installation.html#cdn-links
好吧，这里需要该解决方案，基金会实际上在 6.6.3 中
这不是OP正在寻找的答案，但是由于我正在使用SCSS，因此如果有人正在寻找SCSS中的解决方案，因此将其留在这里以提供帮助。
.align-right{
justify-content: center;
@include breakpoint(medium){
justify-content: right;
}
}
您可能可以通过具有较长代码的纯CSS和midia查询来实现这一点。