Как я могу выровнять по центру загрузочные карты без центрирования текста внутри?

Question

Я использую код, предоставленный bootstrap для карточек на их веб-сайте, но не могу выровнять по центру карточки по моей странице, не выровняв текст внутри карточек.

Это то, что у меня сейчас есть -> https://i.imgur.com/f06m0Qc.png

<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>
<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>
<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>

Стиль, которого я хочу достичь, это -> https://i.imgur.com/PaonbTR.png

Сейчас не беспокоюсь о стиле, так как я могу изменить это в CSS.

Answer 1

Пожалуйста, проверьте ссылку ниже. Надеюсь, это поможет. спасибо

http://jsfiddle.net/3vxtw786/777

Я добавил родительское погружение с внешним классом и дал dispaly: flex и justify-content:center. это принесет все погружения в центре

ниже - ссылка на ваш реф. https://www.w3schools.com/cssref/css3_pr_justify-content.asp

Answer 2

Поместите свой код в div и добавьте имя класса, например, «по центру» Ваш CSS может выглядеть так:

.centered {
           margin-right:auto; 
           margin-left:auto ; 
}