如何居中水平包含兩行的div？

Question

我似乎無法得到這兩行居中在我的項目的容器中間。我希望兩行位於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/

Answer 1

添加這種風格：

.page-wrapper { 
    text-align: center; 
} 

Updated Fiddle

Answer 2

更好的方法是.card + .card {margin-left: 10%}

和父行添加text-align:center

這裏是代碼：https://jsfiddle.net/v2vn0wza/1/

Answer 3

您可以使用display: flex; justify-content: center;至.card-row將內容居中，並將.card上的margin-right更改爲.card:not(:last-child) { margin-right: 10%; }，以使其不會應用於行中的最後一個元素。

.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; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.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; 
 
} 
 

 
.card:not(:last-child) { 
 
    margin-right: 10%; 
 
} 
 

 
.card:hover { 
 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 
 
} 
 

 
.container { 
 
    padding: 2px 16px; 
 
}

<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>

Answer 4

也可以使用在顯示：表/表小區屬性：

https://jsfiddle.net/v2vn0wza/3/

/* update */ 
 

 
#card_holder { 
 
    display:table; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.card-row { 
 
    display: table-cell; 
 
} 
 
.page-wrapper { 
 
    max-width: 1024px; 
 
    margin: 0 auto; 
 
} 
 

 
/* end update */ 
 

 
#process_section { 
 
    background: #D3D3D3; 
 
} 
 

 

 
.card { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
 
    transition: 0.3s; 
 
    width: 200px; 
 
    height: 300px; 
 
    text-align: center; 
 
    margin-right: 10%; 
 
} 
 

 
.card:hover { 
 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 
 
} 
 

 
.container { 
 
    padding: 2px 16px; 
 
}

<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="https://cdn2.iconfinder.com/data/icons/oxygen/128x128/categories/preferences-desktop-personal.png" alt="Avatar"> 
 
      <div class="container"> 
 
      <h4><b>Payment</b></h4> 
 
      <p>Payment with Paypal</p> 
 
      </div> 
 
     </div> 
 
     <div class="card"> <img src="https://cdn2.iconfinder.com/data/icons/oxygen/128x128/categories/preferences-desktop-personal.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="https://cdn2.iconfinder.com/data/icons/oxygen/128x128/categories/preferences-desktop-personal.png" alt="Avatar"> 
 
      <div class="container"> 
 
      <h4><b>Repair</b></h4> 
 
      <p>Device is repaired</p> 
 
      </div> 
 
     </div> 
 
     <div class="card"> <img src="https://cdn2.iconfinder.com/data/icons/oxygen/128x128/categories/preferences-desktop-personal.png" alt="Avatar"> 
 
      <div class="container"> 
 
      <h4><b>Return</b></h4> 
 
      <p>Return in 4-5 days</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</div>