我正在尝试将这些卡片居中显示,但是当我调整页面大小时,它们会偏离中心。如果可能的话,我希望只使用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>