Невозможно центрировать div при изменении размера - PullRequest
Новая
       6

Невозможно центрировать div при изменении размера

0 голосов
/ 04 июля 2018

Я пытаюсь отобразить эти карты в центре, однако, когда я изменяю размер страницы, они не в центре. Я хотел бы добиться этого, используя только HTML и CSS, если это возможно. Я хотел бы отображать карты в строках по 4. Кто-нибудь может помочь? Спасибо 

<style>
  .review-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 200px;
    text-align: center;
    font-family: arial;
    padding: 5px;
    float: left;
    margin-left: 5%`enter code here`;
  }
</style>
<h1 style="text-align: center;">cards</h1>
<div class="row">
  <div class="column">
    <div class="review-card">

      <img class="alignnone size-medium wp-image-271388" src="https://expertpensions.co.uk/wp-content/uploads/2018/07/blank-profile-picture-973460_640-300x300.png" alt="image" width="300" height="300" />
      <h2>John</h2>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'sstandard dummy text ever since the 1500s
    </div>
  </div>
  <div class="column">
    <div class="review-card">
      <img class="alignnone size-medium wp-image-271388" src="https://expertpensions.co.uk/wp-content/uploads/2018/07/blank-profile-picture-973460_640-300x300.png" alt="image" width="300" height="300" />
      <h2>Gayle</h2>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
    </div>
  </div>
  <div class="column">
    <div class="review-card">
      <img class="alignnone size-medium wp-image-271388" src="https://expertpensions.co.uk/wp-content/uploads/2018/07/blank-profile-picture-973460_640-300x300.png" alt="image" width="300" height="300" />
      <h2>Caroline</h2>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
    </div>
  </div>
  <div class="column">
    <div class="review-card">
      <img class="alignnone size-medium wp-image-271388" src="https://expertpensions.co.uk/wp-content/uploads/2018/07/blank-profile-picture-973460_640-300x300.png" alt="image" width="300" height="300" />
      <h2>Linda</h2>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 04 июля 2018

Я несколько упростил ваш код и уменьшил размеры, просто чтобы он лучше отображался здесь.

Суть исправления состоит в том, чтобы заставить столбцы отображаться с использованием "inline-block" и использовать выравнивание текста по центру в родительском контейнере 

<style>
  .row {
    background: pink;
    text-align: center;
  }
  
  .column {
    display: inline-block;
  }
  
  .review-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 200px;
    text-align: center;
    font-family: arial;
    font-size: 12px;
    padding: 5px;
    background: white;
    margin-left: 1%;
  }
</style>
<h1 style="text-align: center;">cards</h1>
<div class="row">
  <div class="column">
    <div class="review-card">
      <img src="https://placehold.it/100x100?text=Temp+Image(100x100)">
      <h2>John</h2>
    </div>
  </div>
  <div class="column">
    <div class="review-card">
      <img src="https://placehold.it/100x100?text=Temp+Image(100x100)">
      <h2>Gayle</h2>
    </div>
  </div>
  <div class="column">
    <div class="review-card">
      <img src="https://placehold.it/100x100?text=Temp+Image(100x100)">
      <h2>Caroline</h2>
    </div>
  </div>
  <div class="column">
    <div class="review-card">
      <img src="https://placehold.it/100x100?text=Temp+Image(100x100)">
      <h2>Linda</h2>
    </div>
  </div>
</div>
...