title: Unable to center text for <a>
body: <p>In the following code, I have a bootstrap navigation. On the right, I have a login form and a sign up form. On successful login, the form and sign up disappears and profile and signout are displayed</p>
  
  <p>login is a <code>&lt;button&gt;</code>, signup, profile and signout are <code>&lt;a&gt;</code></p>
  
  <p>Following is the <code>css</code> I am applying to both <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code></p>
  
  <pre><code>.content-div__button--blue{
    background-color: #4da3f8;
    border:none;
    color:white;
    border-radius: 8px;
    width:100px; /* sets the width of the content area to 200 px */
    height: 40px;
    box-sizing: border-box;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  </code></pre>
  
  <p>My issue is that the text within <code>&lt;a&gt;</code> is not in the center but it is for the <code>&lt;button&gt;</code>. If I change the <code>&lt;a&gt;</code> to <code>&lt;button&gt;</code> then the text gets in the center. Why is the text not getting centrally aligned when I use <code>&lt;a&gt;</code>?</p>
  
  <pre><code> &lt;ul class="navbar-nav navbar-right"&gt;
        &lt;ng-container *ngIf = "userNotloggedIn"&gt;
          &lt;li &gt;
            &lt;form class="form-inline" [formGroup]="loginForm" (ngSubmit)="signInUser()" novalidate&gt;
              &lt;label for="username" class="control-label required sr-only"&gt;Username&lt;/label&gt;
              &lt;input type="text" id="username" class="form-control" placeholder="username" formControlName="userName" [ngClass]="validateField('userName')" required&gt;
              &lt;app-show-errors [control]="loginForm.controls.userName"&gt;&lt;/app-show-errors&gt;
              &lt;label for="password" class="control-label required sr-only"&gt;Password&lt;/label&gt;
              &lt;input type="password" id="password" class="form-control" placeholder="password" formControlName="password" [ngClass]="validateField('password')" required&gt;
              &lt;app-show-errors [control]="loginForm.controls.password"&gt;&lt;/app-show-errors&gt;
                &lt;button type="submit" id="login-button" class="btn content-div__button--blue btn-sm"&gt;Sign In&lt;/button&gt;
  
            &lt;/form&gt;
          &lt;/li&gt;
          &lt;li class="nav-item" &gt;
            &lt;a class="nav-link" [routerLink]="signupRouterLink" id="signup-link" class="btn content-div__button--blue btn-sm"&gt;Sign Up&lt;/a&gt; &lt;!-- Sign Up is not in center but if I change &lt;a&gt; to button then the text comes in center --&gt;
          &lt;/li&gt;
        &lt;/ng-container&gt;
        &lt;ng-container *ngIf="!userNotloggedIn" &gt;
          &lt;li class="nav-item" &gt; 
            &lt;a id="profile-link" [routerLink]="" (click)="onProfileClick()" class="btn content-div__button--blue btn-sm"&gt;My Profile&lt;/a&gt; &lt;!-- My Profile is not in center but if I change &lt;a&gt; to button then the text comes in center --&gt;
          &lt;/li&gt;
          &lt;li class="nav-item" &gt; 
            &lt;a [routerLink]="" id="signout-link" (click)="onSignoutClick()" class="btn content-div__button--blue btn-sm"&gt;Sign out&lt;/a&gt; &lt;!-- Sign Out is not in center but if I change &lt;a&gt; to button then the text comes in center --&gt;
          &lt;/li&gt;
        &lt;/ng-container&gt;
      &lt;/ul&gt;
  </code></pre>