Question

我有一个内部有三个col-md-4的容器。每列都有卡片布局。一切都显示得很好。但是，如果窗口在992px下调整大小并且列堆叠，则它们会向左浮动。起初我用过：

<div align="center">

但不是HTML5。任何其他解决方案都无济于事。

以下是我现在的所有内容：

<div class="categories">
  <div class="container">
    <div class="row">
      <!-- 1st card -->
      <div class="col-md-4">
        <div class="card">
          <div class="cardoverlay">
            <div class="line">
              <hr>
              <i class="fa lifering"></i>
              <hr>
            </div>
          </div>
        </div>
      </div>
      <!-- 2nd card -->
      <div class="col-md-4">
        <div class="card">
          <div class="cardoverlay">
            <div class="line">
              <hr>
              <i class="fa cogs"></i>
              <hr>
            </div>
          </div>
        </div>
      </div>
      <!-- 3rd card -->
      <div class="col-md-4">
        <div class="card">
          <div class="cardoverlay">
            <div class="line">
              <hr>
              <i class="fa cubes"></i>
              <hr>
            </div>
          </div>
        </div>
      </div>
    </div>`

        .categories {
      background-color: #e1e1e1;
      height: auto;
      text-align: center;
    }

    .card {
      max-width: 353px;
      height: 662px;
      -webkit-border-radius: 5px/7px;
      -moz-border-radius: 5px/7px;
      border-radius: 8px/10px;
      background-color: #fff;
      -webkit-box-shadow: 0 2px #b8b3b3;
      -moz-box-shadow: 0 2px #b8b3b3;
      box-shadow: 3px #b8b3b3;
      margin-top: 50px;
      margin-bottom: 50px;
    }

    .line {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
    }

    hr {
      border: 0;
      border-top: 1px solid #c2c6c7;
      flex: 1;
      z-index: 1;
    }

    .lifering:after {
      font-size: 90px;
      color: #d67676;
      padding: 20px;
      content: '\f1cd';
      display: inline-block;
      text-shadow: 0.7px -1px 0.7px #450c04;
    }

    .cogs:after {
      font-size: 90px;
      color: #329fdd;
      padding: 20px;
      content: '\f085';
      display: inline-block;
      text-shadow: 0.7px -1px 0.7px #000000;
    }

    .cubes:after {
      font-size: 90px;
      color: #36d7b7;
      padding: 20px;
      content: '\f1b3';
      display: inline-block;
      text-shadow: 0.7px -1px 0.7px #000000;
    }


    .cardoverlay {
      max-width: 353px;
      height: 202px;
      -webkit-border-radius: 5px 5px 0 0/10px 10px 0 0;
      -moz-border-radius: 5px 5px 0 0/10px 10px 0 0;
      border-radius: 5px 5px 0 0/10px 10px 0 0 #f1f1f1;
      background-color: #f9f9f9;
      -webkit-box-shadow: 0 3px #f1f1f1;
      -moz-box-shadow: 0 3px #f1f1f1;
      box-shadow: 0 3px #f1f1f1;
    }

Fiddle

Answer 1

如果您在CSS中将 margin：50px auto; 添加到 .card ，它将使卡片居中对齐。 50px将保留卡顶部和底部的边距，自动工作中心对齐。新的卡片样式如下所示：

.card {
  max-width: 353px;
  height: 662px;
  -webkit-border-radius: 5px/7px;
  -moz-border-radius: 5px/7px;
  border-radius: 8px/10px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px #b8b3b3;
  -moz-box-shadow: 0 2px #b8b3b3;
  box-shadow: 3px #b8b3b3;
  margin:50px auto;
}

将项目置于Bootstrap列中

1 个答案: