CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
AlexGH
AlexGH

Reputation: 2805

Display text inside button in one line

I have a button with some text inside it, it displays the text in one line, which is okay, but when I center the button using display:block then the button is centered which is fine but the text inside it has a line break and is divided in two lines, I want the text only to be displayed in one line: This is my code:

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

When I have my code like this the text is displayed in one line but I need to center the button:

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

This is what I want:

enter image description here

And this is how the text is displayed when I center the button:

enter image description here

What do I need to do?

Upvotes: 5

Views: 5891

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

You need to add 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;
}

Upvotes: 11

Related Questions