Question

我正在尝试在div内居中显示“ Resource Booker”的自举井，以使其与下面的两个框正确对齐。香港专业教育学院试图添加填充，但它在井内添加填充。我在下面提供了图片和代码。

页面截图

      <div class="col-sm-8 text-left"> 
            <br>
            <br>
     <div class="well well-lg" style="background-color:rgb(0,50,0); color:white;"><h1>   Resource Booker </h1> </div> 
            <br>
            <br>           
       <div class="row">     
      <div class="column"> 
        <div class="card" id="hi" style="width:400px; height:300px;">
          <p><i class="fa fa-user"></i></p>
          <h1>Book</h1>
          <p>Book A Room</p>
          <p>  <span class="glyphicon glyphicon-book" style="font-size:150px;"></span></p>
        </div>
      </div>
    <center>
      <div class="column">
    <br>
      </div> 
      <div class="column">
   <div class="card" id="bye" style="width:400px; height:300px;>
          <p><i class="fa fa-coffee"></i></p>                               
          <h1>Calender</h1>
          <p>Check Availability</p>
          <p>  <span class="glyphicon glyphicon-calendar" style="font-size:150px;"></span></p>
        </div>
      </div>        
    </div>
        </div>
          </center>       
    </div>

井下卡的CSS为：

/ *并排浮动四列* /

.column {
  float:left;
  width: 27%;

  padding: 0px 50px 0px 90px;
}

.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
}

/* Style the counter cards */

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #444;
  color: white;

}

.fa {font-size:200px;

Answer 1

尝试添加环绕container的{{1}}类。您也可以将div添加到同一行。此外，请为您的项目添加一个代码笔，以便我们的移动用户可以试用该解决方案。

Answer 2

如果您将div添加margin-left，则必须在媒体查询中调整该边距，最好让max-width跳水并给他们margin: 0 auto and width: 100%。

您的CSS会喜欢

.well{max-width: 400px; width: 100%; margin: 0 auto;}

将BootStrap很好地居中

2 个答案: