need help to vertially center the following elements

Question

I have a section that I want vertically centered in HTML and CSS. I've tried everything I could find and what is in my knowledge but it just won't work. I have to do it in pure html/css so can't use any frameworks. The first picture is the reference and the second one is how mine looks. I have tried putting the "track-display" content in the < li > into a < div > and then vertically-center, justify-content to center but it won't work. Separately centring also doesn't work. If it helps I'm working on Atom and Safari.

.free-buy-button {
  background-color: #fed1ef;
  color: #1c6dd0;
  padding: 8px 15px;
}

.free-buy-button:hover {
  background-color: #a3e4db;
  color: #1c6dd0;
}

.price-button {
  padding: 8px 15px;
  background-color: #a3e4db;
  color: #1c6dd0;
  box-shadow: 0.1em 0.1em #1c6dd0;
}

.price-button:hover {
  background-color: #fed1ef;
  color: #1c6dd0;
  box-shadow: 0.3em 0.3em #1c6dd0;
}

.tracks-panel {
  color: #fff8f3;
  padding: 5% 15%
}

.tracks-list {
  background-color: #1c6dd0;
  box-shadow: 0.5em 0.5em #a3e4db;
  display: grid;
  padding: 5% 5%;
}

.track-display {
  background-color: #fff8f3;
  box-shadow: 0.1em 0.2em #fed1ef;
  color: #1c6dd0;
  padding: 0 5%;
  margin: 1% 0;
}

.track-detail {
  display: inline-grid;
  font-size: 11pt;
  padding: 2%;
  vertical-align: center;
}

.track-detail-img {
  height: 50px;
  width: 50px;
  vertical-align: text-top;
  margin-left: 2%;
}

.track-tag {
  display: inline;
  margin-left: 25%;
  margin-right: 5%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<div class="tracks-panel">
  <ul class="tracks-list">
    <li class="track-display">
      <a href="#"><i class="fa-solid fa-play fa-xl"></i></a>
      <img src="images/test-panel.png" alt="" class="track-detail-img">
      <ul class="track-detail">
        <li><a href="#">track-name</a></li>
        <li><a href="#">bpm</a></li>
        <li><a href="#">key</a></li>
      </ul>
      <ul class="track-tag">
        <li><a href="#">tag</a></li>
        <li><a href="#">tag</a></li>
        <li><a href="#">tag</a></li>
      </ul>
      <button type="button" name="button" class="free-buy-button"><i class="fa-solid fa-arrow-down"></i> free</button>
      <button type="button" name="button" class="price-button"><i class="fa-solid fa-cart-shopping"></i> $price</button>
    </li>
  </ul>
</div>

What do you want to happen if the element's height is too large to fit in the viewport? — A Haworth, Nov 05 '22 at 05:06

score -1 · Accepted Answer · answered Nov 05 '22 at 05:03

-1

To vertically center items, you can set the parent container to have the following CSS properties:

display: flex;
align-items: center;

So in your case adding these properties to the track-display class should do the trick.

answered Nov 05 '22 at 05:03

grant-n

74
6

need help to vertially center the following elements

1 Answers1