CODEWITHSUNDEEP
cssreactjs
dawn
dawn

Reputation: 1341

Text content doesn't wants to center itself inside <a> tag (React)

For some reason, the text inside an <a> element (generated by React) doesn't want to center itself. It can move up and down, but not to the middle.

flex or text-align doesn't seem to help.

.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>

enter image description here

Upvotes: 0

Views: 45

Answers (1)

Rohan Agarwal
Rohan Agarwal

Reputation: 2609

Just tried it using text-align: center and it seems to be working.

.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>

Upvotes: 1

Related Questions