文本对齐：中心不适用于水平 dojox/mobile/ScrollablePane

Question

我正在使用 dojo.mobile (1.10) 构建一个简单的移动应用程序，但遇到以下问题（可能是由于我缺乏 CSS 知识，非常抱歉）。

为了我的问题，假设我想创建一个水平 ScrollablePane，其中包含一些动态添加到容器中并完全居中的按钮。

解决水平对齐问题我想到的第一件事是：

<div data-dojo-type="dojox/mobile/ScrollablePane" data-dojo-props="scrollDir: 'h'" style="text-align:center; white-space: nowrap;">
  <button data-dojo-type="dojox/mobile/Button">My Button 1</button>
  <button data-dojo-type="dojox/mobile/Button">My Button 2</button>
  <button data-dojo-type="dojox/mobile/Button">My Button 3</button>
</div>

不幸的是，前面的代码使按钮左对齐。如果我删除 'scrollDir' 属性，那么按钮会水平对齐，但是当然，当所有按钮宽度的总和超过移动显示宽度时，就不再可能水平滚动。

最终，我想要实现的是：

1. 虽然按钮的总宽度小于移动显示宽度，但按钮应在容器内完全居中且彼此之间的距离相同；
2. 当按钮的总宽度大于移动显示宽度时，新按钮应该可以通过水平滚动容器到达。

请查看previous points in picture。

我想知道我的尝试失败的原因以及我的 UI 问题的潜在解决方案。

提前致谢。

Answer 1

我已经在 CSS 中添加了样式，但您可以查看在您的情况下如何将它们添加到 data-dojo-props 属性中。基本上，您需要有一个水平溢出的包装器，其中包含不包装的按钮块。

/* Ignore this Stuff: */
html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* Important Stuff: */
.wrapper {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.inner {
  white-space: nowrap;
}

<div class='wrapper'>
  <div data-dojo-type="dojox/mobile/ScrollablePane" data-dojo-props="scrollDir: 'h'" style="/*text-align:center; white-space: nowrap;*/" class="inner">
    <button data-dojo-type="dojox/mobile/Button">My Button 1</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 2</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 3</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 4</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 5</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 6</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 7</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 8</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 9</button>
  </div>
</div>