Inhalt vertikal in der Mitte der verschachtelten Spalte (Bootstrap) ausrichten

Question

Ich möchte, dass mein Inhalt (H3 + p) in der Mitte (horizontal und vertikal) von <div class="col-md-12 inside-row"> ist.

Ich habe versucht zu zeigen: flex und align-items: center. Es hat meinen Inhalt in der Mitte meines <div> positioniert, aber dann begann die ganze Spalte von oben auf meiner Seite und war über meiner Kopfzeile ...

Die Klasse .vertical-align sollte zentrieren (vertikal und horizontal) Mein Header und es hat gut funktioniert.

Ich arbeite mit Bootstrap.

Danke für Ihre Hilfe!

hier ist mein HTML:

<section> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <img src="icons/blue-bezier.gif" alt="icon1"> 
        <img src="icons/blue-network.gif" alt="icon2"> 
        <img src="icons/blue-layers.gif" alt="icon3"> 
       </div> 
       <div class="col-md-6"> 
        <div class="col-md-12 inside-row"> 
         <h3>Plan for the long term</h3> 
         <p>Launch universal, fungible, and programmable digital assets. Utilize our smart contract platform for fraud-prouf P2P trading, uncrackable DRM, esports services &amp; active viral marketing.</p> 
        </div> 
        <div class="col-md-12 inside-row"> 
         <h3>Proof of Play is a purpose-built system for game currency</h3> 
         <p>A decentralized network that scales down to mobile and provides a cryptographically accurate count of players online. PoP determines a fixed issuance rate based on real gameplay.</p> 
        </div> 
        <div class="col-md-12 inside-row"> 
         <h3>Backed by the security of Ethereum</h3> 
         <p>A turing complete platform with numerous pre optimized contract templates.</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>  
</section> 

und meine CSS:

.vertical-center { 
    min-height: 100%; /* Fallback for browsers do NOT support vh unit */ 
    min-height: 100vh; /* These two lines are counted as one */ 
    display: flex; 
    align-items: center; 
} 
.row { 
    height: 100vh; 
    width:100%; 
    background-size: cover; 
    margin: 0; 
    padding: 0; 
} 
section .inside-row { 
    height: 100vh; 
    width:100%; 
    background-size: cover; 
} 
section img { 
    width: 40%; 
    margin: 0 auto; 
    display: flex; 
    align-items: center; 
} 

Answer 1

Wenn Sie keine zusätzlichen Markup Hinzufügen nichts ausmacht, ist eine Möglichkeit, dies nur ein Wrapper um Ihre Inhalte hinzufügen

... 
<div class="col-md-12 inside-row"> 
    <div> 
     <h3>Plan for the long term</h3> 
     <p>Launch universal, fungible, and programmable digital assets. Utilize our smart contract platform for fraud-prouf P2P trading, uncrackable DRM, esports services &amp; active viral marketing.</p> 
    </div> 
</div> 

und tun

.inside-row > * { 
    position: relative; 
    top: 50%; 
    transform: translate(0, -50%); 
}