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

我试图在框顶上放一个X和一个对号，并在中间显示标题，这是我的html



结果是这样的：



但是，我希望h5标签说锻炼位于框的中间。谁能帮我？

最佳答案

这是使用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>

关于html - 如何在同一TD上垂直对齐顶部和垂直对齐中间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52417400/