文本内容不想在<a>标记内居中（反应）

Question

由于某种原因，<a>元素内的文本（由React生成）不希望居中。它可以上下移动，但不能移动到中间。

flex或text-align似乎无济于事。

.tabs {
      padding: 0!important;
      margin-bottom: 2.188rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    
    .tab-item {
      border: 1px solid var(--clear-grey);
      margin: 0!important;
      width: 100%;
      size: .875rem;
      height: 3.375rem!important;
      box-shadow: 0 1px 0 0 var(--clear-grey), 0 1px 0 0 var(--clear-grey);
      background-color: rgba(255, 255, 255, 0);
    
    }
    
    .active-tab {
      border-bottom: .188rem solid var(--water-blue)!important;
    }
    
    .tab-content {
      display: none;
      &.active {
        display: block;
      }
    }

<div>
   <nav class="tabs">
      <a class="tab-item active-tab" tabindex="1">Proyecto</a>
      <a class="tab-item" tabindex="2">Datos del cliente</a>
      <a class="tab-item" tabindex="3">Observaciones</a>
   </nav>
</div>

Answer 1

只需使用text-align: center进行尝试，它似乎就可以了。

.tabs {
      padding: 0!important;
      margin-bottom: 2.188rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    
    .tab-item {
      border: 1px solid var(--clear-grey);
      margin: 0!important;
      width: 100%;
      size: .875rem;
      height: 3.375rem!important;
      box-shadow: 0 1px 0 0 var(--clear-grey), 0 1px 0 0 var(--clear-grey);
      background-color: rgba(255, 255, 255, 0);
      text-align:center;
    
    }
    
    .active-tab {
      border-bottom: .188rem solid var(--water-blue)!important;
    }
    
    .tab-content {
      display: none;
      &.active {
        display: block;
      }
    }

<div>
       <nav class="tabs">
         <a class="tab-item active-tab" tabindex="1">Proyecto</a>
         <a class="tab-item" tabindex="2">Datos del cliente</a>
         <a class="tab-item" tabindex="3">Observaciones</a></nav>
    </div>