无法在 AngularJS ui-view 中居中链接

Posted 2023-03-06

【中文标题】无法在 AngularJS ui-view 中居中链接

【英文标题】：Cannot center link in AngularJS ui-view

【发布时间】：2015-10-01 01:10:12

【问题描述】：

我有一个看起来像按钮的链接，需要水平位于页面中心。

这是链接：

<a href="#top" target="_self" class="btn btn-info btn-xs">Return to Top</a>

我试过了：

style = "margin: 0 auto"
style = "text-align: center"
class="btn btn-info btn-xs center-block"

没有任何作用。是因为我的 ui-view 是这样设置的吗？

<div class="col-md-10 col-md-offset-1">
    <ui-view></ui-view>
</div>

我该怎么办？

【问题讨论】：

要使用margin: 0 auto，您需要为链接设置一个固定的width。如果它不是一个选项，text-align: center 需要应用于<ui-view></ui-view> 并且可能是width: 100%

【参考方案1】：

您可以将按钮包装在 div 中，并将 text-center 类添加到 div 中，如下所示：

<div class="text-center">
  <a href="#top" target="_self" class="btn btn-info btn-xs">Return to Top</a>
</div>

【讨论】：

您好 jme11，这里的问题实际上不仅仅是按钮居中。这里的主要问题是......没有宽度使按钮居中。看看我的小提琴。并阅读 Imgonzalves 的另一个答案。

@AngularJR - 实际上，div 是块级元素。因此，它将自动占用父元素宽度的 100%。该按钮是一个内联元素，因此当您将其包装在一个 div 中并添加 text-center 类时，该类只需添加 text-align: center，按钮就会居中。如果你愿意，可以测试一下。

嗨，我明白了，但是这个人在这里没有使用div 元素。是的，如果使用您的 div 示例会这样做。但是这个例子使用的是<ui-view></ui-view>。再看看小提琴第二块。

【参考方案2】：

axc，您好。正如Imgonzalves所说的那样。 你需要给 center 里面的东西一些宽度。

看看这个Fiddle。 您将看到按钮的顶部块居中。 使用放置在父级中的引导类text-center，然后它将使该div内的所有文本和其中的所有文本居中。 父级具有宽度，因为它使用类col-md-10。

此演示中的第二个橙色块向您展示了您尝试执行的操作。

希望这表明您需要给 div 一些宽度以使按钮居中。

【讨论】：

谢谢，但是center-block不应该自动将按钮放在页面中间吗？ @AngularJR

嗨，在这种情况下是和否。正如你在我的小提琴和第二个橙色块中看到的，我给<ui-view class="block2 text-center"> 一个颜色重做橙色并给它一些左/右填充，这样我们就可以看到这个块在哪里。但是这个块在左边，只有按钮的宽度加上填充。因为<ui-view> 没有继承父级的全宽。这就是为什么我们在这种情况下说，</ui-view> 需要指定一个宽度。目前宽度只是按钮的宽度。这是否有助于在这里看到差异。

@AngularJR 你必须明白浏览器基本上会忽略它遇到的任何非标准标签。这就是html 2 规范告诉他们要做的事情。这就是为什么，如果我们想要支持non-standard browsers like IE8，我们必须自己为它们创建 CSS 规则，或者只使用指令作为属性。在这种情况下，我们将 ui-view 指令视为不存在，然后继承来自 col-md-10 div。