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

Question

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

结果是这样的：

不过，我希望h5标签说锻炼位于方框中间。谁能帮我吗？

Answer 1

这是使用flex进行定位的一种方法。

td（此代码段中的div）具有相对位置，因此您可以将顶部动作的绝对位置与justify-content:space-between项将其推到边缘的位置一起使用。

然后，只要您使用align-items:center，就可以将包含要居中的h5的div设置为使用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>