HTML/CSS - Text can't be centered inside a button

Question

So, it's my first time getting into HTML/CSS and naturally, I'm having problems with certain parts.

I made a "Contine" button in my setup.html and gave it a class so I can style it in my styles.css, now the problem is that text-align center doesnt work on the button. I also have a "Start" button in my index.html, but strangely text-align center works there. I tried giving both buttons the same class and different classes. I'm not sure what to do at this point in time.\

My Button in HTML:

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

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

Like I said the #contine part in my styles.css is the exact same for the "start" button, but it only works for the start button.

related: https://stackoverflow.com/q/6810031/ and https://stackoverflow.com/q/8865458/ and https://stackoverflow.com/q/19461521/ — corn on the cob, Nov 05 '20 at 16:46

score 2 · Accepted Answer · answered Nov 05 '20 at 16:51

Problem is with max-width: 280px; and padding: 10px 100px; of button.

you are giving padding of 200px on the horizontal scale and then you are limiting button width to 280px. which leaves only 80px for text within. Remove button width for a better look of a button. Alternatively, you can trade off any of the CSS property over others.

.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>

this definitely helped centering the text, even tho my button seems a little too big now. But that's easily fixed by changing the padding. Thanks for the fast answer! :) — IAmAze, Nov 05 '20 at 16:54

HTML/CSS - Text can't be centered inside a button

1 Answers1