How to center the text to the middle of a button?-CodePudding

I have this button I am trying to make, but I am unable to get the text to be centered. I have previously looked at what past people have answered on how to align text within a button, but the ones I have tried do not seem to work.

  .btn1 {
    width: 160px;
    height: 40px;
    align-items: center;
    text-align: center;
    display: inline;
    border-radius: 60px;
    background-color: white;
    border-color: #05434a; 
    border-width: 3px;
    box-shadow: 5px 6px #05434a;
    text-transform: uppercase;
    font-size: 1.7vh;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    font-family: poppins;
    padding: 0px;
    }
    
    .nd {
      text-decoration: none;
    }

    .social-link {
      text-align: center;
      margin-top: 20px;
      margin-bottom: 0 !important;
    }

  <div class="social-link">
    <a class = "nd" href = "">
      <button class="btn1">
        <p>text</p>
      </button></a>
  </div>

CodePudding user response：

While one thing that seems OK is centering of the text, your HTML has these problems:

Error: The element button must not appear as a descendant of the a element.

Error: Element p not allowed as child of element button in this context

So this snippet removes these two elements and moves the CSS button styling onto the anchor element. It makes this inline-flex to help center the text.

Note: the text is centered though it can sort of appear as if it's a bit high because of the visual strength of the shadow. This snippet puts a 1px width border on the element just so you can assure yourself the text is centered.

.btn1 {
  width: 160px;
  height: 40px;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: inline-flex;
  border-radius: 60px;
  background-color: white;
  border-color: #05434a;
  border-width: 1px;
  border-style: solid;
  box-shadow: 5px 6px #05434a;
  text-transform: uppercase;
  font-size: 1.7vh;
  margin-left: auto;
  margin-right: auto;
  font-family: poppins;
  padding: 0px;
}

.nd {
  text-decoration: none;
}

.social-link {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0 !important;
}

<div class="social-link">
  <a class="nd btn1" href="">
        text
  </a>
</div>

CodePudding user response：

Well, pretty easy and always works:


    display: flex;
    justify-contect: center;
    align-item: center;

that will get the job done

for the

element, set:


    text-align: center;