Unable to center text for <a> - css

Question

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
login is a <button>, signup, profile and signout are <a>
Following is the css I am applying to both <button> and <a>
.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;
}
My issue is that the text within <a> is not in the center but it is for the <button>. If I change the <a> to <button> then the text gets in the center. Why is the text not getting centrally aligned when I use <a>?
<ul class="navbar-nav navbar-right">
<ng-container *ngIf = "userNotloggedIn">
<li >
<form class="form-inline" [formGroup]="loginForm" (ngSubmit)="signInUser()" novalidate>
<label for="username" class="control-label required sr-only">Username</label>
<input type="text" id="username" class="form-control" placeholder="username" formControlName="userName" [ngClass]="validateField('userName')" required>
<app-show-errors [control]="loginForm.controls.userName"></app-show-errors>
<label for="password" class="control-label required sr-only">Password</label>
<input type="password" id="password" class="form-control" placeholder="password" formControlName="password" [ngClass]="validateField('password')" required>
<app-show-errors [control]="loginForm.controls.password"></app-show-errors>
<button type="submit" id="login-button" class="btn content-div__button--blue btn-sm">Sign In</button>
</form>
</li>
<li class="nav-item" >
<a class="nav-link" [routerLink]="signupRouterLink" id="signup-link" class="btn content-div__button--blue btn-sm">Sign Up</a> <!-- Sign Up is not in center but if I change <a> to button then the text comes in center -->
</li>
</ng-container>
<ng-container *ngIf="!userNotloggedIn" >
<li class="nav-item" >
<a id="profile-link" [routerLink]="" (click)="onProfileClick()" class="btn content-div__button--blue btn-sm">My Profile</a> <!-- My Profile is not in center but if I change <a> to button then the text comes in center -->
</li>
<li class="nav-item" >
<a [routerLink]="" id="signout-link" (click)="onSignoutClick()" class="btn content-div__button--blue btn-sm">Sign out</a> <!-- Sign Out is not in center but if I change <a> to button then the text comes in center -->
</li>
</ng-container>
</ul>

Answer 1

a is an inline-element where centering won't have any effect since it's only as wide as its contents (regardless if there's a widthsetting or not). Add display: inline-block to that CSS rule, that should solve your problem by making the a tag an inline-block which takes on the defined width.