Wie zentriert man ein div mit zwei horizontalen Zeilen?

Question

Ich kann nicht scheinen, diese beiden Reihen in der Mitte des Containers für mein Projekt zentriert zu bekommen. Ich möchte, dass die zwei Reihen in der Mitte der div mit einem kleinen Abstand zwischen ihnen sind, aber ich kann es nicht zur Arbeit bringen.

Bild

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

diesen Stil hinzufügen:

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

Updated Fiddle

Answer 2

der bessere Weg ist .card + .card {margin-left: 10%}

und für Zeile Eltern text-align:center

Hier hinzuzufügen ist Code: https://jsfiddle.net/v2vn0wza/1/

Answer 3

Sie können display: flex; justify-content: center; bis .card-row verwenden, um den Inhalt zu zentrieren, und margin-right unter .card zu .card:not(:last-child) { margin-right: 10%; } ändern, damit es nicht auf das letzte Element in der Zeile angewendet wird.

.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

Sie können auch die Anzeige verwenden: Tabelle/table-cell Eigenschaften:

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>