Question

我有一个大的div部分，分为三列（它设置为显示为表格，因此每一列的高度都相同），并且我需要垂直对齐位于其中的元素（卡片）在每列中。

我尝试通过在列的类中添加position: relative并将元素（卡）垂直对齐，并将以下代码添加到相关卡的类中：

position: absolute;
top: 50%;
transform: translate(-50%);

但是它没有工作，而是完全搞砸了并破坏了页面的结构。

我也尝试使用vertical-align: middle，但是它什么也没做。

这是我当前拥有的代码的一部分（没有上面提到的编码尝试）：

    <div id="cards">
      <div class="col">
        <div class="card card-cyan">
          <h2>Supervisor</h2>
          <p>Monitors activity to identify project roadblocks</p>
        </div>
      </div>
      <div class="col">
        <div class="card card-red">
          <h2>Team Builder</h2>
          <p>Scans our talent network to create the optimal team for your project</p>
        </div>
        <div class="card card-orange">
          <h2>Karma</h2>
          <p>Regularly evaluates our talent to ensure quality</p>
        </div>
      </div>
      <div class="col">
        <div class="card card-blue">
          <h2>Calculator</h2>
          <p>Uses data from past projects to provide better delivery estimates</p>
        </div>
      </div>
    </div>

#cards {
    padding-left: 8%;
    padding-right: 8%;
    display: table;
}

.col {
    display: table-cell;
    padding: 2%;
}

.card {
    border-radius: 10px;
    border: none;
    background-color: #ffffff;
    padding: 2%;
    width: 100%;
}

关于如何解决此问题的任何想法？

如何在表格列中垂直居中放置元素？

0 个答案: