html - 在一行中显示按钮内的文本

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;
}