Html 将按钮移动到div的顶部 < >我如何将我的更多按钮从div中间对齐，以对齐到div的顶部（x标记是）？< /p>

这是我的JSFIDLE:

我的代码如下：

。课程侧边栏音频项目容器{
显示器：flex；
对齐项目：居中；
宽度：100%；
}
.课程侧边栏音频项目图标容器{
对齐项目：居中；
自我校准：灵活启动；
显示器：flex；
弹性收缩：0；
高度：56px；
证明内容：中心；
宽度：56px；
背景色：rgba（80,102,144,0.1）；
颜色：#506690；
边界半径：5px；
}
.课程侧边栏音频项目图标容器：悬停{
背景色：rgba（80,102,144,0.15）；
过渡：背景色0.15s缓进缓出；
光标：指针；
}
.课程侧边栏音频项目图标{
对齐项目：居中；
证明内容：中心；
宽度：100%；
身高：100%；
位置：相对位置；
垂直对齐：文本底部；
框大小：边框框；
}
.课程侧边栏音频项目详细信息{
-webkit字体平滑：抗锯齿；
字体大小：400；
线高：1.6；
用户选择：无；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
宽度：100%；
溢出：隐藏；
左侧填充：12px；
}
.课程侧边栏音频项目标题{
线高：1.6；
字体大小：16px；
}
.课程侧边栏音频项目持续时间{
颜色：#506690；
字体大小：14px；
}
.课程侧边栏音频项工具栏菜单容器{
字体大小：1.4rem；
字体大小：400；
线高：1.6；
}
.课程侧边栏音频项工具栏菜单{
字体大小：1.4rem；
字体大小：400；
光标：指针；
显示：内联flex；
线高：16px；
顶部：4px；
}
.课程侧边栏音频项工具栏菜单按钮{
字号：1rem；
显示：内联块；
颜色：#506690；
高度：16px；
线高：16px；
字号：700；
文本转换：大写；
空白：nowrap；
大纲：无；
边界半径：8px；
光标：指针；
边界：0；
保证金：0；
背景色：rgba（80,102,144,0.1）；
}
.课程侧边栏音频项工具栏菜单按钮：悬停{
背景色：rgba（80,102,144,0.15）；
过渡：不透明度0.15s缓进缓出；
}
.课程侧边栏音频项工具栏菜单图标>svg{
光标：指针；
显示：内联块；
框大小：边框框；
宽度：16px；
高度：16px；
页边顶部：-1px；
垂直对齐：顶部；
}
.侧边栏步骤工具栏容器{
过渡：不透明度150ms缓进缓出0s；
不透明度：1；
位置：绝对位置；
改变：转变；
z指数：10；
宽度：150px；
利润上限：85px；
右：24px；
}
.侧边栏步骤工具栏容器边框{
填充：0；
边界半径：4px；
利润率：8px0；
背景色：#fff；
盒影：0 0 0 1px rgba（14,19,24,0.07），0 2px 12px rgba（14,19,24,0.2）；
}
.侧边栏步骤工具栏按钮容器{
填充：16px；
最大高度：80vh；
溢出y：自动；
z指数：10；
}
.侧边栏步骤工具栏按钮行{
显示：网格；
}
.侧边栏步骤工具栏按钮{
边界半径：4px；
背景：透明；
边界：0；
光标：指针；
填充：0.5雷姆；
保证金：0.25雷姆0；
弹性：1050%；
宽度：7.5雷姆；
大纲：无；
文字装饰：无；
高度：40px；
过渡：背景色0.1s线性；
字体大小：400；
线高：1.6；
字体大小：0.9rem；
-webkit字体平滑：抗锯齿；
-webkit点击突出显示颜色：透明；
}
.侧边栏步骤工具栏按钮内容{
对齐项目：居中；
显示器：flex；
身高：100%；
线高：1.6；
最小宽度：0；
光标：指针；
}
.侧边栏步骤工具栏按钮：悬停{
背景色：#edf0f2！重要；
}

测试_startup_ideas.mp3
6:20

添加

对齐自我：灵活启动
至
。课程侧栏音频项工具栏菜单容器
：

编辑：要将包含的按钮进一步向上移动，还要添加
行高：0。这样，按钮将与
的上边框对齐。课程侧边栏音频项工具栏菜单容器

还有其他方法可以导致相同的结果，这只是其中之一


。课程侧边栏音频项目容器{
显示器：flex；
对齐项目：居中；
宽度：100%；
}
.课程侧边栏音频项目图标容器{
对齐项目：居中；
自我校准：灵活启动；
显示器：flex；
弹性收缩：0；
高度：56px；
证明内容：中心；
宽度：56px；
背景色：rgba（80,102,144,0.1）；
颜色：#506690；
边界半径：5px；
}
.课程侧边栏音频项目图标容器：悬停{
背景色：rgba（80,102,144,0.15）；
过渡：背景色0.15s缓进缓出；
光标：指针；
}
.课程侧边栏音频项目图标{
对齐项目：居中；
证明内容：中心；
宽度：100%；
身高：100%；
位置：相对位置；
垂直对齐：文本底部；
框大小：边框框；
}
.课程侧边栏音频项目详细信息{
-webkit字体平滑：抗锯齿；
字体大小：400；
线高：1.6；
用户选择：无；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
宽度：100%；
溢出：隐藏；
左侧填充：12px；
}
.课程侧边栏音频项目标题{
线高：1.6；
字体大小：16px；
}
.课程侧边栏音频项目持续时间{
颜色：#506690；
字体大小：14px；
}
.课程侧边栏音频项工具栏菜单容器{
字体大小：1.4rem；
字体大小：400；
线高：1.6；
自我校准：灵活启动；
线高：0；
}
.课程侧边栏音频项工具栏菜单{
字体大小：1.4rem；
字体大小：400；
光标：指针；
显示：内联flex；
线高：16px；
顶部：4px；
}
.课程侧边栏音频项工具栏菜单按钮{
字号：1rem；
显示：内联块；
颜色：#506690；
高度：16px；
线高：16px；
字号：700；
文本转换：大写；
空白：nowrap；
大纲：无；
边界半径：8px；
光标：指针；
边界：0；
保证金：0；
背景色：rgba（80，