How do I keep the buttons the same size/position with a fixed height-CodePudding

Here are things that I need to explain:

I need to set my height of the buttons to 35px;
If there is less text, the buttons seem to create a bit of a gap on the top
Less text also does not center the text in the middle of the button (awkward gap in the button)

HTML:

<div >
     <div >    
       <a href="#"  data-tab-name="promo-category-0"><p>Lorem ipsum</p></a>
       <a href="#"  data-tab-name="promo-category-1"><p>Lorem et</p></a>
       <a href="#"  data-tab-name="promo-category-2"><p>Lorem ipsum et ipsum dolor sit</p></a>
     </div>
</div>

CSS:

  .tabs {
    text-align: center;
  }
  
  .up-promos {
    background-color: black;
  }
  
  .up-promos .tabs a {
    border: 1px solid #fff;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    display: inline-block;
    text-align: center;
    margin: 0 0 10px 10px;
    text-decoration:none;
    text-align: center;
    width:150px;
    height: 35px;
  }
  
  .up-promos .tabs a.active {
    background-color: #fff;
    color: black;
    font-weight: bold;
  }

JS Fiddle:

What I tried:

.tabs a p{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }

Another thing I cannot figure out is the spacing above the button if the text is short, there is no margin or padding even if I check with inspect element

I would like some help in a solution to my issues.

CodePudding user response：

.tabs {
  text-align: center;
}

.up-promos {
  background-color: black;
}

.up-promos .tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
}

.up-promos .tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  margin: 0 0 10px 10px;
  text-decoration: none;
  width: 150px;
  height: 35px;
}

.up-promos .tabs a.active {
  background-color: #fff;
  color: black;
  font-weight: bold;
}

<div >
  <div >
    <a href="#"  data-tab-name="promo-category-0">
      <p>Lorem ipsum</p>
    </a>
    <a href="#"  data-tab-name="promo-category-1">
      <p>Lorem et</p>
    </a>
    <a href="#"  data-tab-name="promo-category-2">
      <p>Lorem ipsum et ipsum dolor sit</p>
    </a>
  </div>
</div>

CodePudding user response：

Hey instead of positioning you can use flexbox to center text inside the button

   .tabs {
    display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
  }
  
  .up-promos {
    height:100vh;
    background-color: black;
    display: grid;
    place-items: center;
  }
  
  .up-promos .tabs a {
    border: 1.5px solid #fff;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    margin:10px;
    width:150px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
  }
  
  .up-promos .tabs a.active {
    background-color: #fff;
    color: black;
    font-weight: bold;
  }

Output Image

You can visit this pen for reference : https://codepen.io/monishsoni/pen/MWBGgME

In your code, you are giving position absolute to .tabs a p but there is no position given to its parent that's why .tabs a p will be positioned according to the nearest parent element with positioning or the body element if there is no parent element with the position.