Unable to achieve text centering within a button using HTML and CSS

I'm diving into the world of HTML/CSS for the first time and encountering some issues along the way.

In my setup.html, I created a "Continue" button and applied a class to style it in styles.css. However, I'm facing an issue where text-align center doesn't seem to work on the button. Interestingly, I also have a "Start" button in index.html where text-align center does work properly. I've tried assigning both buttons the same class as well as different classes, but I'm unsure of what step to take next.

Here's the HTML code for my button:

<div class="startcontainer">
        <a href="./home.html">
            <button id="continue"><span>Continue</span></button>
        </a>
</div>

And here is my CSS:

.startcontainer {
    position: fixed;
    border-radius: 5px;
    width: calc(100% - 20px);
    height: calc(100% - 120px);
    left: 10px;
    right: 10px;
    bottom: 3%;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #1F1F1F;
    float: middle;
    text-align: center;
}

.startcontainer a {
    position: relative;
    display: block;
    margin: 0 auto;
    top: 40%;
    text-decoration: none;
    border: 0;
}

.startcontainer a #continue {
    position: relative;
    max-width: 280px;
    max-height: 60px;
    line-height: 60px;
    padding: 10px 100px;
    font-size: xx-large;
    background-color: #1F1F1F;
    color: #FFFFFF;
    opacity: .87;
    line-height: normal;
    font-family: 'Open Sans', sans-serif;
    border: 5px solid  #8644A1;
    border-radius: 45px;
    display: block;
    margin: 0 auto;
    top: 40%;
    transition: 0.4s;
    outline: 0;
    cursor: pointer
}

.startcontainer a #continue span {
    display: block;
    line-height: 30px;
    
}

.startcontainer a #continue:hover {
    background-color: #8644A1;
}

Although the styling for the "#contine" part in my styles.css file is identical to that of the "start" button, it seems to only apply correctly to the start button.

Answer №1

Issue lies with the max-width: 280px; and padding: 10px 100px; settings of the button.

By applying a horizontal padding of 200px and restricting the button width to 280px, only 80px is left for text content. Consider removing the button width property for an improved button appearance. Alternatively, you can adjust other CSS properties accordingly.

.startcontainer {
    position: fixed;
    border-radius: 5px;
    width: calc(100% - 20px);
    height: calc(100% - 120px);
    left: 10px;
    right: 10px;
    bottom: 3%;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #1F1F1F;
    float: middle;
    text-align: center;
}

.startcontainer a {
    position: relative;
    display: block;
    margin: 0 auto;
    top: 40%;
    text-decoration: none;
    border: 0;
}

.startcontainer a #continue {
    position: relative;
/*     max-width: 280px; */
    max-height: 60px;
    line-height: 60px;
    padding: 10px 100px;
    font-size: xx-large;
    background-color: #1F1F1F;
    color: #FFFFFF;
    opacity: .87;
    line-height: normal;
    font-family: 'Open Sans', sans-serif;
    border: 5px solid  #8644A1;
    border-radius: 45px;
    display: block;
    margin: 0 auto;
    top: 40%;
    transition: 0.4s;
    outline: 0;
    cursor: pointer
}

.startcontainer a #continue span {
    display: block;
    line-height: 30px;  
}

.startcontainer a #continue:hover {
    background-color: #8644A1;
}
<div class="startcontainer">
  <a href="./home.html">
    <button id="continue"><span>Continue</span></button>
  </a>
</div>

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

Align the image so that it is perfectly positioned along the lower edge of the window

I have been experimenting with parallax scrolling and resizing images using JavaScript. However, I am struggling to align my homepage perfectly with the edge of the window. The code I have doesn't line up with the bottom edge of the webpage. If I us ...

Another option for replacing <BR> tags with CSS styling

I am currently utilizing the br tag to insert line breaks in my website's faq section. Although the output is accurate, I'm exploring alternatives like implementing linebreak through CSS to enhance responsiveness. During my research, I came acros ...

Tips for incorporating a visible HTML comment in JSX code?

Currently implementing ReactJS and facing a requirement to insert visible HTML comments (visible in the html source) within JSX. Unsure of the correct approach to achieve this. A third party vendor necessitates this comment for processing purposes on the ...

Creating a JavaFX label with a border radius of 20

I need help with creating rounded edges for two labels in my interface. I want the first label (Hello) to have rounded edges on the top left and top right, and the dummy label to have rounded edges on the bottom right and bottom left. I've attempted ...

Having trouble inserting an image using Vue?

I am having trouble understanding why only the first image loads, while the others do not. 1. <img :src="require('../assets/batatas.jpg')" :alt="item.title" /> 2. <img :src="'../assets/batatas.jpg'" ...

Does strip_tags() have vulnerabilities to scripting attacks?

Has there been any known XSS or other attack that can bypass the following code snippet? $content = "some HTML code"; $content = strip_tags($content); echo $content; This function does not modify any attributes on the tags that you allow using ...

Using AJAX to dynamically populate PHP form inputs from HTML

I'm trying to create a simple HTML form where users can input their information and have it sent to a PHP file using JavaScript with AJAX. However, I'm encountering an issue where the values from the form are not being included in the email that ...

Which method is more effective: embedding PHP processing code within HTML files, or having forms redirect to separate PHP scripts that ultimately point back to static pages?

I'm in the process of developing a new website, and I'm still learning about PHP. Would it be more advantageous to use .html pages where buttons with Onclick would trigger JavaScript functions that redirect to a PHP page for database interaction ...

Ways to dynamically manipulate HTML elements in Angular 5

Recently, I've been attempting to programmatically transform an HTML element. Strangely, when I update the transform value in the console tab, it changes successfully, but for some reason it doesn't reflect in the element tab of the browser. onD ...

Text that only occupies a portion of the screen width

My unordered list (ul) contains three list items (li). The first li element displays the text "opptakskrav" and the last li element displays "ja". Can anyone explain why the text in my second li element does not use the full width and starts a new line hal ...

What is the best way to extract text from a dynamically changing element using jQuery?

I've been struggling with a coding issue. Despite trying numerous approaches, I keep encountering the same problem where every new button I add ends up having the same text or, alternatively, nothing seems to work as expected. $j serves as my variabl ...

Flyer - Chart "dimmed" and unselectable when dimensions are specified as a proportion

I am currently working on displaying a map within a container. I have successfully been able to display the map by setting its size to a specified number of pixels. However, my goal is to have the height of the map adapt to the size of the container dynami ...

Adjusting the width of a button can result in gaps forming between neighboring buttons

I am currently working on a calculator project that involves customizing the width of a specific button with the ID equal. However, when I adjust the width of this button, it results in unexpected spacing between the third and fourth buttons in each row, c ...

What could be causing this excessive lag?

I've been developing a new website, but the "buttons" I'm using seem to be causing significant lag. I need help resolving this issue. You can view the website here: The problematic code snippet is shown below: <td> <a href="templi ...

Dynamic Mat-select-trigger that automatically adjusts its size to fit the content

Currently, I am experimenting with an Angular Mat-Select that allows multiple selections. To display the selected values in the value field, I have implemented a custom Mat-Select-Trigger. My goal is to enable automatic resizing of the value field (similar ...

Tips for crafting paragraphs that double as sieves

I'm trying to simplify and shorten this code. I have three HTML paragraphs acting as filters: "all", "positive," and "negative", referring to reviews. Each has a corresponding div for reviews: "allcont", "poscont", and "negcont". Clicking on any of th ...

Crafting a personalized arrow for sorting headers in Angular Material

Currently working on an Angular 5 project and I'm looking to implement a custom sort icon in the header. The goal is to achieve a similar effect to this example, without using the default arrow. I attempted to modify the CSS styles, but it wasn' ...

Ways to stop a hyperlink from executing on confirmation cancel using jquery

I'm having trouble with a link that should not perform any action when the cancel button is clicked. I've attempted to use false in the click event and also tried using e.preventDefault, but I'm unsure if I am implementing it correctly. Can ...

What is the process for transforming a Typescript source file into JavaScript?

I have a basic HTML file with a script source set to index.ts. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge ...

Unable to get CSS Filter to function properly in Firefox

I'm having trouble with the CSS filter on my Firefox (15.0) browser. Here is the HTML code: <div class="google"> <img src="https://www.google.com/images/srpr/logo3w.png"> </div> And here is the CSS code: .google{ -moz ...