Html 按钮不会在图像上方并排显示

以下是我的项目代码片段：

身体{ 身高：100%； 保证金：0； 填充：0； 字体系列：“蒙特塞拉特”，无衬线； 字体大小：16px； } 输入，按钮{ 字体系列：“蒙特塞拉特”，无衬线； } .img_主容器{ 显示器：flex； 证明内容：中心； 对齐项目：居中； 身高：100%； } .居中{ 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； } .btn\u注册，.btn\u登录：悬停{ 背景：5d8ffc； 颜色：fff； 边框：1px实心5d8ffc； 边界半径：5px； 显示：块； 宽度：300px； 高度：40px； 过渡：0.3s； -webkit转换：0.3s； -moz跃迁：0.3s； } .btn\u登录、.btn\u注册：悬停{ 背景色：透明； 背景重复：无重复； 颜色：ffffff； 边界半径：5px； 显示：块； 宽度：300px； 高度：40px； 光标：指针； 溢出：隐藏； 大纲：无； 过渡：0.3s； -webkit转换：0.3s； -moz跃迁：0.3s； } 注册 登录

---

Flexbox将是一个很好的解决方案。将display:flex添加到.centered类。这将并排放置.的直接子对象

.centered {
  display: flex;
}

由于您在按钮上使用display:block.btn_sign_、.btn_login，所以不能使两个按钮并排，因为block覆盖了整个水平部分

而不是使用display:inline块，您将拥有并排的按钮

.centered {
  display: flex;
}

---

有关此问题的更多信息，请访问使用Flexbox。这是更好的解决方案。将display:flex添加到.centered类。

---

.centered{display:flex；align items:center}

删除显示：块并调整width@TemaniAfif谢谢你的帮助。还有一个简短的问题。当您运行我的代码时，您可以看到图像中的“中心”是不正确的。如何修复此问题？我无法在注释部分创建代码片段，但我将向您发送改进代码的屏幕截图。实际上你不需要class.centered，而且对于背景图像你应该使用css背景图像：url'link'；不是html标记。对于居中按钮，您使用“对齐项目”“垂直对齐”和“对齐内容”“水平对齐”，这足以居中。CSS->HTML->当然，我的按钮不需要“.centered”吗？还有一个简短的问题。当您运行我的代码时，您可以看到图像中的“中心”是不正确的。如何解决这个问题？