html - 如何在 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;
 }