如何使按钮保持相同的大小/位置和固定的高度

Question

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 class="up-promos">
     <div class="tabs">    
       <a href="#" class="r-button active" data-tab-name="promo-category-0"><p>Lorem ipsum</p></a>
       <a href="#" class="r-button " data-tab-name="promo-category-1"><p>Lorem et</p></a>
       <a href="#" class="r-button " 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: https://jsfiddle.net/6k20489o/

My first attempt is to just center the texts inside the button but it had them outside due to my position: I would like to know how do I fix this:

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.

Answer 1

 .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 class="up-promos"> <div class="tabs"> <a href="#" class="r-button active" data-tab-name="promo-category-0"> <p>Lorem ipsum</p> </a> <a href="#" class="r-button " data-tab-name="promo-category-1"> <p>Lorem et</p> </a> <a href="#" class="r-button " data-tab-name="promo-category-2"> <p>Lorem ipsum et ipsum dolor sit</p> </a> </div> </div>

Answer 2

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 ap but there is no position given to its parent that's why .tabs ap will be positioned according to the nearest parent element with positioning or the body element if there is no parent element with the position.