如何在Bootstrap

Question

如何将此图像居中以使其居中。我打算将按钮放在图像中，然后将它们放在容器的中心。但如果我尝试修复它，菜单会继续使用绿色横幅。以下是我的HTML和CSS代码： 的 HTML

<div id="difficultyButton" class="col-lg-12 level mt" style="display:none; text-align:center;">
    <button type="button" class="myButton  " id="btn_easy">Easy</button> 
    <br>
    <button type="button" class="myButton " id="btn_medium">Medium</button> 
    <br>
    <button type="button" class="myButton " id="btn_hard">Hard</button> 
    <br>
    <button type="button" class="myButton mt " id="btn_exitStart">Exit</button> 
</div>

CSS

.level{
   height: 530px;
   width: 600px;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-align-content: center;
   background-image: url("../images/CYL/levels.png");
   background-repeat: no-repeat;
}

myButton {
  -moz-box-shadow:inset 0px 0px 0px 0px #3e7327;
  -webkit-box-shadow:inset 0px 0px 0px 0px #3e7327;
  box-shadow:inset 0px 0px 0px 0px #3e7327;
  background: -moz-linear-gradient(top,  #33a6cc 50%, #0099cc 50%); 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); 
  background: -webkit-linear-gradient(top,  #33a6cc 50%,#0099cc 50%);
  background: -o-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); 
  background: -ms-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); 
  background: linear-gradient(to bottom,  #33a6cc 50%,#0099cc 50%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 );
  background-color:#FFFFFF;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  width: 30%;
  font-family:Arial;
  font-size:19px;
  padding:11px 76px;
  text-decoration:none;
  text-shadow:0px 0px 0px #5b8a3c;
  margin-bottom: 10px
}

以下是目前的情况：

Answer 1

尝试将此添加到级别类

 .level
 {
    margin: 0 auto;
 }

Answer 2

将background-position: top center;添加到.level课程，我认为您需要移动按钮。

Answer 3

尝试将课程center-block添加到#difficultyButton容器

中

Answer 4

我刚刚为.level和.myButton添加了一些位置属性，以便按钮位于图像的顶部。position: absolute;和position: relative分别是我添加的。