无法将引导介质卡放在小型移动设备屏幕上的中心

Question

以下使用flexbox/中心引导媒体卡的代码可以正常工作，除了在移动大小的屏幕上查看时，框向左对齐。我希望它们在屏幕中居中。

我考虑将左对齐更改为居中或文本对齐：居中，但它似乎不起作用。我尝试将其应用于下面的文章和行。不确定为什么它不能正确居中？

.CSS

.card .card-body {
    padding: 15px;
    text-align: center;
}
.boxFixDw {
  display:inline-block; width: 285px;
  color: #1576b9;
}

HTML
<div class="row flexbox-wrap">
  
      <div class="col-lg-4 flexbox-equalise">
        <article class="media card card-1">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-lg-12">
                <div class="card-body align-self-left">
                  <h4 class="list-group-item-headline boxFixDw">LATEST RESOURCES</h4>
                  <p class="list-group-item-text">More added each week.</p>
                   <a href="X" class="button product_type_subscription add_to_cart_button ajax_add_to_cart">VIEW NOW</a>
                </div>
              </div>
            </div>
        </article>
      </div>
  
        <div class="col-lg-4 flexbox-equalise">
        <article class="media card card-1">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-lg-12">
                <div class="card-body card-body-left">
                  <h4 class="list-group-item-headline boxFixDw">JOIN NOW</h4>
                  <p class="list-group-item-text">For instant access.</p>
                   <a href="#" data-toggle="modal" data-target="#modalJoin" class="button product_type_subscription add_to_cart_button ajax_add_to_cart">SIGN UP</a>
                </div>
              </div>
            </div>
        </article>
      </div>
  
           <div class="col-lg-4 flexbox-equalise">
        <article class="media card card-1">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-lg-12">
                <div class="card-body card-body-left">
                  <h4 class="list-group-item-headline boxFixDw">SAMPLE RESOURCES</h4>
                  <p class="list-group-item-text">Check the quality.</p>
                  <a href="X/" class="button product_type_subscription add_to_cart_button ajax_add_to_cart">VIEW NOW</a>
                </div>
              </div>
            </div>
        </article>
      </div>
  
    </div>

Answer 1

除了在移动大小的屏幕上查看时，框在哪里 向左对齐。

要将卡片居中显示在移动设备上，您需要通过媒体查询将align-items: flex-start;更改为align-items: center;以.media

@media only screen and (max-width: 767px) {
  .media {
        align-items: center !important;
    }
} 

.card .card-body {
    padding: 15px;
    text-align: center;
}
.boxFixDw {
  display:inline-block; width: 285px;
  color: #1576b9;
}
@media only screen and (max-width: 990px) {
  .media {
		align-items: center !important;
	}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row flexbox-wrap">
  
      <div class="col-lg-4 flexbox-equalise">
        <article class="media card card-1">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-lg-12">
                <div class="card-body align-self-left">
                  <h4 class="list-group-item-headline boxFixDw">LATEST RESOURCES</h4>
                  <p class="list-group-item-text">More added each week.</p>
                   <a href="X" class="button product_type_subscription add_to_cart_button ajax_add_to_cart">VIEW NOW</a>
                </div>
              </div>
            </div>
        </article>
      </div>
  
        <div class="col-lg-4 flexbox-equalise">
        <article class="media card card-1">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-lg-12">
                <div class="card-body card-body-left">
                  <h4 class="list-group-item-headline boxFixDw">JOIN NOW</h4>
                  <p class="list-group-item-text">For instant access.</p>
                   <a href="#" data-toggle="modal" data-target="#modalJoin" class="button product_type_subscription add_to_cart_button ajax_add_to_cart">SIGN UP</a>
                </div>
              </div>
            </div>
        </article>
      </div>
  
           <div class="col-lg-4 flexbox-equalise">
        <article class="media card card-1">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-lg-12">
                <div class="card-body card-body-left">
                  <h4 class="list-group-item-headline boxFixDw">SAMPLE RESOURCES</h4>
                  <p class="list-group-item-text">Check the quality.</p>
                  <a href="X/" class="button product_type_subscription add_to_cart_button ajax_add_to_cart">VIEW NOW</a>
                </div>
              </div>
            </div>
        </article>
      </div>
  
    </div>
</div>