Zurb Foundation 6菜单：小设备无需额外CSS的居中方法

你提到的两种方法无效是因为对Foundation 6的响应式属性和类的用途理解有点偏差，其实完全可以用内置类实现需求，不用额外写CSS，下面是具体方案：

正确的HTML写法 #

<ul class="vertical menu medium-align-right small-text-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>

为什么这个写法有效？ #

• medium-align-right：指定中等及以上尺寸设备时，菜单容器使用flex右对齐（对应你原本的align-right效果，但限定了断点）。
• small-text-center：指定小尺寸设备时，菜单项的文本居中对齐——垂直菜单的每个列表项是块级元素，文本对齐需要用text-center类的响应式版本，而不是align-center（后者是控制容器的flex布局对齐，不是文本对齐）。

为什么你之前的尝试无效？ #

1. data-responsive-menu="small-align-center"：这个属性是用来配置响应式菜单的交互逻辑（比如切换成汉堡菜单），根本不是用来控制对齐样式的，所以完全不起作用。
2. small-align-center：单独加这个类只会让菜单容器的flex内容居中，但菜单项的文本还是默认左对齐，所以视觉上看不到居中效果，必须配合small-text-center才能让文本真正居中。

进阶：如果需要菜单容器整体居中 #

如果你不仅想让文本居中，还想让整个菜单容器在小屏幕上水平居中，可以再加一个small-align-center类：

<ul class="vertical menu medium-align-right small-align-center small-text-center">
  <!-- 菜单项 -->
</ul>

这样小屏幕下菜单容器本身会水平居中，同时菜单项文本也居中，中等及以上设备保持右对齐的效果。

内容的提问来源于stack exchange，提问作者Simon Hayter