frigideiro
frigideiro

Reputation: 1

This button's "padding" makes no sense

I was trying to make a button with a red border thats in the bottom and in the middle, but, its padding doesn't let me! You can see with the border, its like 100% width, it makes no sense.

Ive tried everything, the only "solution" i found, was to set the margins to something like 200px, but the hitbox is still massive in the x axis, if someone knows what might becausing this i'd appreciate an answer, thank you!!

HTML:

<div class="message">
  <h1>NA CONJUGAÇÃO DO COMPROMISSO, DO ACOMPANHAMENTO E DA ATENÇÃO.</h1>
  <h3>A colaboração de todos é fundamental para a concretização dos pressupostos de uma escola que todos queremos.</h3>
</div>
<div class="button">
  <a href="example.com">
    <div class="ano-letivo">Ano Letivo</div>
  </a>
</div>

CSS:

h1 {
    font-family: 'Abril Fatface', cursive;
    color: white;
    text-align: center;
    padding: 80px 300px 5px;
    font-size: 60px;
    text-shadow: 0px 2px 3px black;
}

h3 {
    font-family: 'Roboto Slab', serif;
    color: white;
    text-align: center;
    text-shadow: 0px 2px 3px black;
}

.ano-letivo {
    text-align: center;
    color: white;
    font-weight: 600;
    padding: 10px;
    border: 3px solid rgb(255, 69, 59);
}

How it looks: (except background) The red button

Upvotes: 0

Views: 41

Answers (1)

Connor Fogarty
Connor Fogarty

Reputation: 326

A commenter correctly points out that you should probably change your element from div to button. However, if for some reason you need to keep the element as-is, adding the following CSS rules should center it:

width: fit-content;
margin: 0 auto;
display: block;

Here's a demo:

h1 {
    font-family: 'Abril Fatface', cursive;
    color: white;
    text-align: center;
    padding: 80px 300px 5px;
    font-size: 60px;
    text-shadow: 0px 2px 3px black;
}

h3 {
    font-family: 'Roboto Slab', serif;
    color: white;
    text-align: center;
    text-shadow: 0px 2px 3px black;
}

.ano-letivo {
    font-weight: 600;
    padding: 10px;
    border: 3px solid rgb(255, 69, 59);
    width: fit-content;
    margin: 0 auto;
    display: block;
}
<div class="button">
  <a href="example.com">
    <div class="ano-letivo">Ano Letivo</div>
  </a>
</div>

Upvotes: 1

Related Questions