Question

这是我的项目代码的片段：

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}

input, button {
  font-family: 'Montserrat', sans-serif;
}

.img_main_container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn_sign_up, .btn_login:hover {
  background: #5d8ffc;
  color: #fff;
  border: 1px solid #5d8ffc;
  border-radius: 5px;
  display: block;
  width: 300px;
  height: 40px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.btn_login, .btn_sign_up:hover {
  background-color: Transparent;
  background-repeat:no-repeat;
  color: #ffffff;
  border-radius: 5px;
  display: block;
  width: 300px;
  height: 40px;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

<!DOCTYPE html>
<html>
  <body>

    <div class="img_main_container">
      <img src="https://natgeo.imgix.net/subjects/headers/ND%20header%20(1).jpg?auto=compress,format&w=1920&h=960&fit=crop" alt="Storm" style="width:100%;">
      <div class="centered">
        <button class="btn_sign_up">Sign up</button>
        <button class="btn_login">Login</button>
      </div>
    </div>
  </body>
</html>

一切正常，如您所见。但我希望这两个按钮并排在一起，如下面的图像所示：

我尝试了很多示例，但没有任何效果。而且我仍然不知道这里出了什么问题。如果有人可以帮助，那就太好了。提前致谢。：）

Answer 1

由于您在按钮（.btn_sign_up，.btn_login）上使用了display:block，所以不能使两个按钮并排放置，因为块覆盖了整个水平部分。

代替使用display:inline-block，您将并排放置按钮。

您可以在W3Schools上获得更多信息

Answer 2

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

.centered {
  display: flex;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

使用Flexbox解决此问题。这是更好的解决方案。添加display：flex到.centered类。 .centered {display：flex; align-items：center}

按钮没有在图像上方并排显示

3 个答案: