Невозможно центрировать текст для <a> - PullRequest
Новая
       6

Невозможно центрировать текст для <a>

0 голосов
/ 17 мая 2018

В следующем коде у меня есть начальная навигация.Справа у меня есть форма входа и форма регистрации.При успешном входе в систему форма и регистрация исчезают, а профиль и выход из системы отображаются

имя входа - <button>, регистрация, профиль и выход из системы - <a>

Ниже следует cssЯ обращаюсь как к <button>, так и к <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;
}

Моя проблема заключается в том, что текст в <a> находится не в центре, а для <button>.Если я изменю <a> на <button>, тогда текст окажется в центре.Почему текст не выравнивается по центру, когда я использую <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>

1 Ответ

0 голосов
/ 17 мая 2018

a - это inline-element, где центрирование не будет иметь никакого эффекта, поскольку его ширина настолько велика, насколько его содержимое (независимо от того, есть настройка width или нет).Добавьте display: inline-block к этому правилу CSS, которое должно решить вашу проблему, сделав тег a встроенным блоком, который принимает определенную ширину.

...