The problem with styling a CSS button text

My website's CSS button used to have the text in the middle, but now it appears at the bottom and the button is smaller. Someone had access to my root folder and made changes that I am unaware of.

.button
{
    display: inline;
    margin-top: 2em;
    padding: 1em 2em 1em 2em;
    background: #8dc63f;
    letter-spacing: 0.20em;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.90em;
    color: #FFF;
}

.button:before
{
}

Answer №1

attempt this: display: inline-block

This method should fix the issue.

Answer №2

Include the CSS properties display: block; and text-align:center;

    .button{
    display: block;
    text-align:center;
    margin-top: 2em;
    padding: 1em;
    background: #8dc63f;
    letter-spacing: 0.20em;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.90em;
    color: #FFF;
   }

View the demonstration here

Answer №3

Give this a shot:

text-align: center;
display:flex;
align-items:center;

Let me know if this works for you.

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

Embed fashion and graph elements into a CSV document (generated from <script>)

Encountering an issue with my code. I am looking to export an HTML table to a CSV file (specifically Libre Office Calc, regardless of csv, xls or xlsx format, as long as it runs on a Linux Server). Found a script online that works well after some modificat ...

No validation errors are currently being displayed. I am attempting to retrieve the error message when validation fails

My form validation error has suddenly stopped working. It was functioning properly yesterday, so I must have made a mistake somewhere, but I can't seem to pinpoint it. Now, when I attempt to sign up without entering any information, it just redirects ...

Experience a login page similar to Google's with a fully functional back button

I'm currently working on a login page that requires the user to enter their username and have it validated before proceeding. Once the username is confirmed as valid, a new input field for password entry should appear. However, I'm facing an issu ...

The custom classes I have created in Material UI are being overshadowed by the default classes provided by Material UI

I am trying to change the color of a TextField label to black when it is focused. I used classes in InputProps with a variable, but unfortunately, the default styling of material UI is taking precedence in chrome dev tools. Below is the code snippet. Pleas ...

Is it possible to use a jsp:include tag to incorporate a complete JSP page as the content of a tab?

Can someone assist me with defining JSP pages as content for my tabs using the "jsp:include" tag? Here's an example (Note: "page0.jsp")... <ul id="smTabs" class="nav nav-tabs" style="margin-bottom: 15px;"> <li class="act ...

What can I do to prevent my background images from overlapping each other?

I'm trying to get the background images to display side by side with equal sizes and no spacing between them. The current code achieves this, but the images end up overlapping slightly, not filling 100% of the container. Despite setting the backgroun ...

What causes the iframe to protrude beyond the bottom of the page when set to 100% height?

I am facing an issue with an iframe on my website that is contained within a div. I have specified both to have a height of 100%, and I am using the blueprint framework, hence applying the class span-12 last. Despite these settings, a scroll bar still appe ...

Tips for adjusting Bootstrap's sub drop-down menu to the opposite side when hovering with the mouse

I'm working on a menu that has a dropdown feature, and here is a snippet of the code: <li class="nav-item flyout"> <a href="#" class="nav-link dropdown-toggle nav_sp_clr {{#ifpage 'quicklink'}}active{{/ifpage}}">Quick Links ...

Dropmenu | Designing with Materials | Pair of Choices | Intersection

My goal is to incorporate dropdown fields with material design only. After researching various examples online, I have noticed a recurring issue. When there are two dropdown items close to each other, they end up overlapping. Check out this example: http ...

The request made to `http://localhost:3000/auth/signin` returned a 404 error, indicating that

My goal is to access the signin.js file using the path http://localhost:3000/auth/signin Below is my code from [...nextauth].js file: import NextAuth from "next-auth" import Provider from "next-auth/providers/google" export default N ...

Apply an image as the background for the body using Bootstrap 5 styling

I'm wondering how I can set the background of the whole webpage (the body) to an image. I'd like to add a subtle fade effect to avoid it being too overpowering. <style> body { background-image:url("{% static 'portfolio ...

Harnessing the power of JavaScript to dynamically extract data from JSON formats

My goal is to extract multiple strings from a JSON object and combine them into one large string. Initially, I thought it made sense to use a loop that would add each new string during each iteration. However, upon implementation, some unexpected errors ar ...

What is the best way to add space between div elements with bootstrap classes?

For my project, I am utilizing bootstrap and I need to create space between divs. Here is the code I am using: <div className="container"> <div className="row"> <div className="col-lg-4 col-md-4 col-sm-12 col-12 box">a</div&g ...

Replacing a div with another div can be achieved in a single swap

My goal is to swap one div with another div upon clicking using the provided code. It functions properly for a single instance. However, the issue arises when the class appears multiple times, causing all instances to change due to sharing the same class n ...

Activate my Bootstrap navbar links using only JavaScript code

I am currently working on a project where I want my navbar links to become active when clicked. My initial thought is to add the 'active' class when a link is clicked, but I'm unsure how to ensure that only one link is active at a time. Addi ...

Identify Horizontal Swipe Gestures on Page-level

I am currently focused on ensuring accessibility for users utilizing voiceover technology. While navigating their phone, these individuals rely on right and left swipes to interact with elements on a page. I am seeking to implement swipe detection at the ...

Divide the information in the table across several pages for easier printing

I have encountered an architectural challenge with my server-side React app. The app renders charts and tables with page breaks in between to allow a puppeteer instance to print the report for users in another application. The issue I'm facing is mak ...

Having trouble extending my navbar to the full height of the window

Having an issue with my code regarding the menu. I am trying to create a navbar that fills the height on the left side for PC screens and becomes scrollable at the top for mobile versions. The problem lies in my flex container not properly filling the scr ...

What is the method for specifying the HTML file extension within Visual Studio?

I am having issues with my project recognizing the CSS and other files in the HTML files I have created, even though I have double-checked the extension paths. How can I resolve this problem? https://i.stack.imgur.com/85ooE.png https://i.stack.imgur.com/F ...

Guide on incorporating the font-awesome library in your project

Forgive me if this sounds like a silly question, but I am completely new to javascript and its libraries. I stumbled upon a similar issue as described in this thread, where the accepted solution included the following line: <link rel="stylesheet" href ...