时间戳

首页 > 解决方案 > 在我的横幅和中心放置 2 个按钮 div

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

问题描述

我想在横幅和中心放置 2 个按钮 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;

}

你有什么想法吗？

标签： htmlcss

解决方案

尝试以下代码以获得良好的设计，并在横幅中设置最大高度和宽度图像，这种类型的设计不会产生任何问题，这是正确的方法。

.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>

推荐阅读