在一行内的按钮内显示文本

Question

我有一个带有一些文字的按钮，它在一行中显示文字，这没关系，但是当我使用display:block居中按钮时，按钮居中，这很好，但里面有文字有一个换行符，分为两行，我希望文本只显示在一行： 这是我的代码：

<div class="MyClass"><a type="button" style="margin:auto; display:block" class="ButtonLink" href="@Url.Action("MyAction","MyController")">Selected Now</a></div>

当我有这样的代码时，文本显示在一行中，但我需要将按钮居中：

<div class="MyClass"><a type="button" class="ButtonLink" href="@Url.Action("MyAction","MyController")">Selected Now</a></div>

这就是我想要的：

这就是当我将按钮居中时文本的显示方式：

我需要做什么？

Answer 1

您需要添加white-space: nowrap。

<div class="MyClass">
    <a type="button" class="ButtonLink" href="@Url.Action("MyAction","MyController")">Selected Now</a>
</div>

.ButtonLink {
  white-space: nowrap;
  text-align: center;
}