我似乎无法让这两行在我的元素的容器中间居中。我希望这两行位于 div 的中心,它们之间有一点边距,但我无法让它工作。
图片
HTML
<div class="page-wrapper">
<section id="process_section">
<h1 class="section-header">Our Process</h1>
<h4 class="text-center">A quick rundown of how we handle things</h4>
<div id="card_holder">
<div class="card-row">
<div class="card"> <img src="icons/iconmonstr-payment-14-120.png" alt="Avatar">
<div class="container">
<h4><b>Payment</b></h4>
<p>Payment with Paypal</p>
</div>
</div>
<div class="card"> <img src="icons/iconmonstr-shipping-box-8-120.png" alt="Avatar">
<div class="container">
<h4><b>Ship</b></h4>
<p>Send Us Your Item</p>
</div>
</div>
</div>
<div class="card-row">
<div class="card"> <img src="icons/iconmonstr-gear-10-120.png" alt="Avatar">
<div class="container">
<h4><b>Repair</b></h4>
<p>Device is repaired</p>
</div>
</div>
<div class="card"> <img src="icons/iconmonstr-shipping-box-9-120.png" alt="Avatar">
<div class="container">
<h4><b>Return</b></h4>
<p>Return in 4-5 days</p>
</div>
</div>
</div>
</div>
</section>
</div>
CSS
.page-wrapper {
width: 1024px;
margin: 0 auto;
}
#process_section {
background: #D3D3D3;
}
#card_holder {
width: 100%;
display: inline;
height: 20%;
margin-left: auto;
margin-right: auto;
}
#card-row {
display: block;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 200px;
height: 300px;
display: inline-block;
text-align: center;
margin-right: 10%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
jsfiddle
https://jsfiddle.net/v2vn0wza/
我是一名优秀的程序员,十分优秀!