Css - How to vertically align different height divs

Rhys
February 12, 2024
149 views
0 votes
2 Answers

I’m trying to vertically align text in a couple of DIV’s in a "tabs" bar. The content in each div is different lengths and some take 2 lines (see screenshot):

#hometabswrap {
  width: 100%;
  background: #ffffff;
  border-top: 1px #e1e1e1 solid;
  border-bottom: 1px #e1e1e1 solid;
  margin: 20px 0;
  padding: 0;
}

#hometabs {
  width: 97%;
  margin: 0px auto;
  display: flex;
  padding: 8px 25px 0px 25px;
  justify-content: stretch;
}

#hometabs .home_tab {
  padding: 10px 14px;
  text-align: center;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}

#hometabs .home_tab_active,
#hometabs .home_tab:hover {
  border-bottom: 2px solid #B22222;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="hometabswrap">
  <div id="hometabs">
    <div class="home_tab">
      <a href="" title="Newest Trips">
        <i class="fa-regular fa-plus"></i> NEWEST
      </a>
    </div>
    <div class="home_tab">
      <a href="/top-rated" title="Top Rated Trips">
        <i class="fa-solid fa-star"></i><br>HIGHLY RATED
      </a>
    </div>
    <div class="home_tab">
      <a href="/london-airports" title="Trips from London Airports">
        <i class="fa-solid fa-plane"></i><br>LONDON AIRPORTS
      </a>
      <!-- closing </a> was missing in the original question -->
    </div>
    <div class="home_tab">
      <a href="/search/overnight" title="Trips including an overnight stay">
        <i class="fa-solid fa-bed"></i> OVERNIGHT
      </a>
      <!-- closing </a> was missing in the original question -->
    </div>
    <div class="home_tab">
      <a href="/search" title="Search Extreme Day Trips">
        <i class="fa-solid fa-magnifying-glass"></i> SEARCH
      </a>
    </div>
  </div>
</div>

I’ve tried adding align-self: center which works but changes the height of the div, thus breaking the bottom border positioning and creates white space:

I’ve played around with various settings but cannot seem to sort this. I’ve learnt that changing align-self automatically breaks the auto height setting by default and can’t figure out how to do both.

This is what I am after:

When hovering over a tab, it shows the red border like in the image (NEWEST has red border because thats the current tab) but the red-border is aligned to the bottom.

Thanks in advance!

Tags: css

Answers

Chosen as BEST ANSWER

I've managed to find a solution by adding a div inside each tab div, making the parent div display: flex and the children div align-self: center

It displays correctly now. Whether this is the correct way to do this i'm not sure.

#hometabswrap {
  width: 100%;
  background: #ffffff;
  border-top: 1px #e1e1e1 solid;
  border-bottom: 1px #e1e1e1 solid;
  margin: 20px 0;
  padding: 0;
}

#hometabs {
  width: 97%;
  margin: 0px auto;
  display: flex;
  padding: 8px 25px 0px 25px;
  justify-content: stretch;
}

#hometabs .home_tab {
  padding: 10px 14px;
  text-align: center;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  display: flex;
}

#hometabs .home_tab_active,
#hometabs .home_tab:hover {
  border-bottom: 2px solid #B22222;
}

#hometabs a {
  color: #5a5a5a;
  text-decoration: none;
}

#hometabs .home_tab .home_tab_inner {
  align-self: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />

<div id="hometabswrap">
  <div id="hometabs">
    <div class="home_tab">
      <div class="home_tab_inner">
        <a href="<?=$baseurl?>" title="Newest Trips"><i class="fa-regular fa-plus"></i> NEWEST</a>
      </div>
    </div>
    <div class="home_tab">
      <div class="home_tab_inner">
        <a href="/top-rated" title="Top Rated Trips"><i class="fa-solid fa-star"></i> HIGHLY RATED</a>
      </div>
    </div>
    <div class="home_tab">
      <div class="home_tab_inner">
        <a href="/london-airports" title="Trips from London Airports"><i class="fa-solid fa-plane"></i> LONDON AIRPORTS</a>
      </div>
    </div>
    <div class="home_tab">
      <div class="home_tab_inner">
        <a href="/search/overnight" title="Trips including an overnight stay"><i class="fa-solid fa-bed"></i> OVERNIGHT</a>
      </div>
    </div>
    <div class="home_tab">
      <div class="home_tab_inner">
        <a href="/search" title="Search Extreme Day Trips"><i class="fa-solid fa-magnifying-glass"></i> SEARCH</a>
      </div>
    </div>
  </div>
</div>

(Edit)

Just add flex and align-items: end; in .home_tab class to have all text in same height and also defind height in #hometabs

example:

     #hometabswrap {
        width: 100%;
        background: #ffffff;
        border-top: 1px #e1e1e1 solid;
        border-bottom: 1px #e1e1e1 solid;
        margin: 20px 0;
        padding: 0;
      }

      #hometabs {
        width: 97%;
        height: 50px;
        margin: 0px auto;
        display: flex;
        padding: 8px 25px 0px 25px;
        justify-content: stretch;
      }

      #hometabs .home_tab {
        display: flex;
        padding: 10px 14px;
        text-align: center;
        align-items: end;
        font-weight: 600;
        border-bottom: 2px solid transparent;
      }

      #hometabs .home_tab_active,
      #hometabs .home_tab:hover {
        border-bottom: 2px solid #b22222;
      }

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <div id="hometabswrap">
      <div id="hometabs">
        <div class="home_tab">
          <a href="" title="Newest Trips"> <i class="fa-regular fa-plus"></i> NEWEST </a>
        </div>
        <div class="home_tab">
          <a href="/top-rated" title="Top Rated Trips"> <i class="fa-solid fa-star"></i><br />HIGHLY RATED </a>
        </div>
        <div class="home_tab">
          <a href="/london-airports" title="Trips from London Airports"> <i class="fa-solid fa-plane"></i><br />LONDON AIRPORTS </a>
          <!-- closing </a> was missing in the original question -->
        </div>
        <div class="home_tab">
          <a href="/search/overnight" title="Trips including an overnight stay"> <i class="fa-solid fa-bed"></i> OVERNIGHT </a>
          <!-- closing </a> was missing in the original question -->
        </div>
        <div class="home_tab">
          <a href="/search" title="Search Extreme Day Trips"> <i class="fa-solid fa-magnifying-glass"></i> SEARCH </a>
        </div>
      </div>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – How to vertically align different height divs

Answers