需要帮助使眩晕中心有以下要素

Question

我有一个章节，我想要垂直中心HTML和CSS。我已经尝试了我所能找到的一切，以及我所知的一切，但这是行不通的。我必须在纯html/css中这样做，所以不能使用任何框架。第一张图片是参考，第二张是我的样子。我尝试过将< li >中的“跟踪显示”内容放入< div >中，然后将其垂直地放在中间，将-内容调整为中心，但它无法工作。另外，居中也不起作用。如果有帮助的话，我正在研究Atom和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>

​

Answer 1

若要垂直居中项，可以将父容器设置为具有下列CSS属性：

display: flex;
align-items: center;

因此，在您的示例中，将这些属性添加到track-display类中应该可以做到这一点。