Question

我想在横幅和中心放置两个按钮div（注册和登录）。但是我认为我的html代码块已经有问题了？

以下是我的网站的概述。

屏幕截图：

我的第一个问题是我不能使用左空白或右空白将按钮“注册”或“登录”移动到中心。

我的问题可能来自代码HTML，这是我的代码块有问题吗？这是我的代码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>

Answer 2

尝试以下代码以获得良好的设计，并在横幅中设置最大高度和宽度图像。对于这种类型的设计，这没有问题。

.myButtonRegister{
  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{
  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;
}
.button-action {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

<div class="my-banner">
  <div class="banner-image">
    <img class="banner" src="images/slider.jpg"/>
      <div class="button-action">
        <div class="myButtonRegister"><a href="lolo.php">REGISTER</a></div>
        <div class="myButtonLogin"><a href="lolo.php">LOGIN</a></div>                    
      </div>
  </div>
  <div class="transparent"></div> 
  <a href="index.php"><img class="picture-logo" src="images/logo.png"/></a>
    <div class="container">
      <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>

Answer 3

使用position:absolute删除margin-top并将父div赋予height和position:relative

.my-banner{
  position:relative;
  height: 450px;
}
.btnBox{
position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    margin: auto;
    bottom: 0px;
    height: 85px;
    width: 336px;
}
.myButtonRegister{

  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{

  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;

}

<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="btnBox">
            <div class="myButtonRegister"><a href="lolo.php">REGISTER</a></div>
      <div class="myButtonLogin"><a href="lolo.php">LOGIN</a></div>
      </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>

将2个按钮div放在我的横幅和中心上

3 个答案: