Html 如何使p元素和按钮与CSS水平对齐

我有一些文本（p元素）和它旁边的两个按钮。但是，这两个按钮看起来不像文本（p元素）那样水平居中对齐。按钮似乎略低于文本

如何使它们看起来水平处于同一水平面上

代码段：

正文{
背景色：rgb（44,63,83）；
}
#计时器{
利润率最高：1%；
}
#时间-p{
颜色：白色；
字体系列：Helvetica、Arial、无衬线字体；
字体大小：3rem；
显示：内联块；
颜色：黑色；
}

计时器
00:00:00
开始
重置

使用“垂直对齐”并调整“p”标记的默认“页边距底部”

正文{
背景色：rgb（44,63,83）；
}
#计时器{
利润率最高：1%；
}
#时间-p{
颜色：白色；
字体系列：Helvetica、Arial、无衬线字体；
字体大小：3rem；
显示：内联块；
颜色：黑色；
垂直对齐：中间对齐；
页边距底部：0；
}

计时器
00:00:00
开始
重置

这样做的现代方式是使用Flexbox。在此处查看Flexbox的基本教程：

这是一款有助于学习Flexbox的优秀游戏：

本质上，您将项目包装在一个div中，该div具有一个属性为

display:flex已应用。
然后，其中的每个项目将水平显示在屏幕上。您可以使用
对齐项目：居中
以获得正确的对齐方式，并
调整内容：间距或
调整内容：周围空格
将项目很好地分布在行中

因此，您的
#timer
块看起来像：

#timer {
    margin-top: 1%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

在d-flex类中包裹p标记并将项目对齐到中心


正文{
背景色：rgb（44,63,83）；
}
#计时器{
利润率最高：1%；
}
#时间-p{
颜色：白色；
字体系列：Helvetica、Arial、无衬线字体；
字体大小：3rem；
显示：内联块；
颜色：黑色；
}

计时器
00:00:00
开始
重置