Show the text within a button on a single line

I'm facing an issue with a button and the text inside it. When I center the button using display:block, the button is centered but the text breaks into two lines instead of staying in one line. Here's my code:

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

If I remove the display:block to keep the text in one line, the button isn't centered as desired:

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

This is what I want to achieve:

https://i.sstatic.net/z7VXu.png

However, this is how the text appears when I try to center the button:

https://i.sstatic.net/0Ws4S.png

Any suggestions on what changes need to be made?

htmlcsstwitter-bootstrap

Answer №1

To ensure the text does not wrap, you should include white-space: nowrap.

<div class="ClassName">
    <a type="button" class="LinkButton" href="@Url.Action("ActionName","ControllerName")">Click Here</a>
</div>

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic gallery with customizable features (HTML/CSS)

Seeking guidance on creating a seamless html/css gallery without any spacing between each gallery element. All elements are identical in size, housed as list items within a ul inside a div. Media queries have been established to adjust site and image siz ...

htmlcssgalleryanimated

What is the best way to ensure that multiple SVG illustrations render smoothly while scrolling?

I created a layout of SVG line charts using the d3.js library. Each line chart is contained within its own <svg> tag inside a wrapper div structured like this: <div id="main-container" style="overflow-x: scroll"> <div class="wrapper-di ...

javascriptcssperformanced3.jssvg

jquery for calculating spans

In this scenario, I am attempting to calculate values based on the active span element. My complete code is available on JSFiddle. The span is not editable and I have assumed that the span values are 40. If a user selects a span, it will change to green co ...

javascriptjquerycss

What steps should I take to eliminate the gap in my fixed bottom navbar?

I'm looking to revamp my menu layout by aligning the links with the social media icons and home button on the same line. The links are nested inside a div within the main navbar class (streetworn-demos), while the social media icons and homepage butt ...

htmlcss

Utilizing the Mouse Hover feature to target various <div id> elements within a single Vue.js function

I have created two div IDs in an HTML file where I have specified the mouseover property. <div id="app"> <img class="img-responsive img-full" v-bind:src="imgData" @mouseover="imgData = imgData_1"> </div> <div id="app1"> <img cl ...

htmlvue.jsvuex

Navigate to a specific section within a table

My table is quite large, with potentially more than 100 rows. To handle this, I've used the Scroll class to give it a fixed height. Within the table, there is a radio button. The issue arises when the table is rendered and, for example, row No. 50 is ...

javascriptjqueryhtmlcssbootstrap-4

Animating the display and concealment of a Ui Bootstrap alert within an AngularJS modal window

Trying to create a dynamic animation for an ng-hide feature used on a Ui Bootstrap alert button within a Ui Bootstrap Modal is proving to be quite challenging. The goal is to have the alert slide in and out while simultaneously fading in and out. Although ...

javascriptcssangularjsangular-ui-bootstrap

JavaScript or jQuery can be used to rearrange the position of child divs within parent divs with a single action

I am facing a dilemma with 5 identical divs, each containing text and an image. My goal is to rearrange the child divs so that the text comes after the image in each article. Put simply, I want the image to be displayed above the text in all instances. Al ...

javascripthtmljquerycss

Please submit information that is not already filled out in the text fields

I am looking to create a table with text fields and buttons as shown below: <table border="1"> <tr> <td>name</td> <td>id</td> <td>icon</td> <td> </td> & ...

htmldjango

I am facing an issue where my Popover functions correctly when elements are added using HTML, but not when they are dynamically created

I'm currently working on a method to incorporate multiple popovers that have a similar appearance to the following: The screenshot of my first JsFiddle project (click to view) The initial progress I've made can be seen in my first JsFiddle, acc ...

javascriptjquerycssbootstrap-4jsfiddle

Tips on avoiding scrolling when toggling the mobile navigation bar:

While working on a website using HTML, CSS, and BS3, I have created a basic mobile navigation. However, I am facing an issue where I want to disable scrolling of the body when toggling the hamburger button. The problem arises when the menu is toggled on, ...

javascriptjqueryhtmlcssmobile

Leveraging the power of beautifulsoup and selenium for web scraping on a multi-page site results in gathering a

I am in the process of scraping text from a website iteratively. Each page on this particular website follows the same html structure. I utilize selenium to go to the next page each time I add the following strings: text_i_want1, text_i_wantA, text_i_wantB ...

htmlpython-3.xseleniumbeautifulsoupslice

Cease all playback of audio immediately

My goal is to ensure that any audio that has been played previously stops before a new audio clip starts playing. This will prevent overlapping clips on elements that may trigger the audio file multiple times. I have attempted to pause and reset the curre ...

javascripthtmldomaudio

What is the best way to apply a color overlay to an image using CSS?

In my current project, I am utilizing React along with HTML, CSS, and Material UI. One of the tasks I am working on is toggling a color overlay on an image when it is clicked. Here is the snippet of JavaScript code I have implemented: const About = ({imgS ...

javascripthtmlcssreactjssass

Styling CSS: Adjusting font sizes for placeholders and text boxes

I am struggling with styling an input field to have a font size of 45px while the placeholder text inside it should be 18px and vertically aligned in the middle. Unfortunately, my current code is not working in Chrome and Opera. Can anyone offer a solutio ...

htmlcssvertical-alignmentplaceholder

Tips for delaying page rendering until an AJAX call finishes

While AJAX calls are known for allowing the rest of a page to load before a certain element is ready, I have a unique business requirement that complicates things. I am mandated to use AJAX due to the architecture in place. However, I cannot give the appe ...

jqueryhtmlajax

JavaScript function to ensure seamless loading of web pages - issue with ordering

Trying my best to explain this, so please bear with me. On a page, I start with a heading and paragraph tag, followed by a series of images that represent my portfolio. Each image serves as a link that, when clicked, triggers an AJAX call to dynamically ...

javascriptjqueryhtmlcssajax

move horizontally to fix within the inner page

As someone who is not a web developer, I usually can figure out how things work on a website. However, today while browsing the site http://www.massivehealth.com/, I found myself spending quite some time trying to understand how they achieve the transition ...

javascriptjqueryhtmlcss

Eliminate the custom button feature from the Datatable

https://i.sstatic.net/7ndvv.png Is there a way to hide the Copy, CSV, Excel, PDF, and Print buttons located in the top right corner of the datatable? These seem to be default features of datatables, but I have been unable to find any information on how to ...

jqueryhtmldatatables

Combining AngularJS directives with jQuery is causing malfunctions

After making an AJAX call, I am adding the following HTML form returned from the server side: <div ng-app="submitExample" > <form action="shan" ng-submit="submit()" ng-controller="ExampleController" id="account_info_modal"> Enter tex ...

javascriptjqueryhtmlangularjsajax