无法将<a>

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是一个inline-element，其中心不会产生任何影响，因为它只有与其内容一样宽（无论是否有width设置与否）。将display: inline-block添加到该CSS规则，这可以通过使a标记成为具有定义宽度的内联块来解决您的问题。