html - 在我的横幅和中心放置 2 个按钮 div

Question

我想在横幅和中心放置 2 个按钮 div(注册和登录)。但是我认为我的 html block 已经有问题了？？

下面是我网站的概览。

截图:

我的第一个问题是我不能使用 margin-left 或 margin-right 将我的按钮“register”或“login”移到中心。

我的问题可能来自代码 HTML，是我的 block 有问题吗？ 这是我的代码 HTML

<div class="my-banner">
    <img class="banner" src="images/slider.jpg"/>
    <div class="transparent"></div> 
    <a href="index.php"><img class="picture-logo" src="images/logo.png"/></a>
    <div class="container">
      <div class="myButtonRegister"><a href="lolo.php">REGISTER</a></div>
      <div class="myButtonLogin"><a href="lolo.php">LOGIN</a></div>
      <div class="topnav">
        <a class="active" href="index.php">HOME</a>
        <a href="#">ABOUT US</a>
        <a href="#">INVESTEMENT PLAN</a>
        <a href="#">NEWS</a>
        <a href="#">FAQS</a>
        <a href="#">RULES</a>
        <a href="#">CONTACT US</a>
      </div>
    </div>
</div>

这是我的代码 CSS

.myButtonRegister{
  margin-top: 342px;
  float: left;
  background-color: #C22312;
  color: white;
  height: 48px;
  width: 168px;
  text-align: center;
  color: white; 
  font-family: 'Pridi', serif;
  font-size: 26px;
  padding-top: 10px; 
  word-spacing: 0px;

}

.myButtonRegister a {
  color: #f2f2f2;
  text-decoration: none;

}

.myButtonLogin{
  margin-top: 342px;
  float: left;
  background-color: black;
  color: white;
  height: 48px;
  width: 168px;
  text-align: center;
  color: white; 
  font-family: 'Pridi', serif;
  font-size: 26px;
  padding-top: 10px; 
  word-spacing: 0px;

}

你有什么想法吗？

Answer 1

只需在您的按钮上添加一个父框，然后使用 flex 来对齐您的按钮。这是一个例子:

.container {
  height: 200px;
  width: 100%;
  background: #eee;
}

.container .subcontainer {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="subcontainer">
    <button>Login</button>
    <button>Register</button>
  </div>
  <!--NAV-->
</div>