html - 如何在同一 TD 中垂直对齐顶部和垂直对齐中间

Question

我试图在框的顶部有一个 X 和一个复选标记，并在中间显示标题，这是我的 html

结果如下:

不过，我希望 h5 标签显示 workout 位于框的中间。谁能帮帮我？

Answer 1

下面是一种使用 flex 进行定位来完成此操作的方法。

td(此代码段中的 div)具有相对定位，因此您可以使用顶部操作的绝对定位和 justify-content:space-between 将元素推到边缘。

然后，包含您希望居中的 h5 的 div 可以通过 align-items:center 设置为垂直居中，通过 justify-content:space-around 设置为水平居中，只要因为您正在使用 display:flex。

<div class="table-task" style="width:100px; height: 300px; background: chartreuse; position:relative">
  <div class="top-actions" style="position:absolute; top:0; width: 100%; box-sizing: border-box; display:flex; padding:10px; justify-content:space-between;">
    <span>X</span>
    <span>X</span>
  </div>
  <div style="width:100%; height:100%; box-sizing:border-box; display:flex; align-items: center; justify-content:space-around;">
    <h5>Workout</h5>
  </div>
</div>