So richten Sie den Text vertikal an der Mitte unten links aus

Question

Es ist eine einzelne Zeile, die aus 3 Spalten besteht. Ich mag die "h5 Klasse: footer-small" machen senkrecht zur div ausgerichtet "Klasse: col-1"

ich, dass Display mit herausgefunden: inline-block, machte es die Text vertikal in der Mitte ausgerichtet. Aber ich habe nicht verstanden, wie es möglich war? Kann jemand erklären, warum mit Display: Inline-Block arbeitete?

HTML

<footer> 
     <div class="row-4"> 
     <div class="col-1"> 
      <p class="col-1"> 
      <h5 class="footer-small">Seattle<br>Grace<br>Hospital</h5> 
      </p> 
     </div> 
     <div class="col-5"> 
      <h5 class="footer-desc">He is a Bowdoin College graduate and attended Columbia University College <br>of Physicians and Surgeons</h5> 
     </div> 
     <div class="col-6"> 
      <h2 class="footer-frase">McDreamy</h2> 
      <em class="footer-frase">"It's a beautiful night to save lives"</em> 
     </div> 
     </div> 
    </footer> 

Answer 1

Sie kann es einfach css3 Flexbox Konzept

fügen Sie die folgenden Arten zu Ihrem col-1

• Display kann mit: flex;

• Ausrichtung: zentriert;

• justify-Inhalt: Mitte;

Hinweis: Sie können keine Header-Tag (<h1>, <h2>, etc ..) in einem Absatz-Tag (<p>), erklären, so ersetzen Sie es durch <span> Tag oder andere Tags

div.row-4{ 
 
    display:flex; 
 
    color:#fff; 
 
    } 
 

 
div.row-4 div{ 
 
    padding:5px; 
 
    } 
 
.col-6{ 
 
    background:#73819b; 
 
    flex:2; 
 
    } 
 
.col-5{ 
 
    background:#438cab; 
 
    flex:2; 
 
    } 
 
.col-1{ 
 
    background:#438cab; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    }

<footer> 
 
     <div class="row-4"> 
 
     <div class="col-1"> 
 
      <span class="col-1"> 
 
      <h5 class="footer-small">Seattle<br>Grace<br>Hospital</h5> 
 
      </span> 
 
     </div> 
 
     <div class="col-5"> 
 
      <h5 class="footer-desc">He is a Bowdoin College graduate and attended Columbia University College <br>of Physicians and Surgeons</h5> 
 
     </div> 
 
     <div class="col-6"> 
 
      <h2 class="footer-frase">McDreamy</h2> 
 
      <em class="footer-frase">"It's a beautiful night to save lives"</em> 
 
     </div> 
 
     </div> 
 
    </footer>

Answer 2

Sie zwei haben, dies zu tun:

1- Line-Höhe einstellen.

2- Oder die Höhe selbst einstellen.

.row-4 { 
 
    
 
    background-color: lightblue; 
 
    height: 200px; 
 
    line-height: 200px; /* <-- this is what you must define */ 
 
    vertical-align: middle; 
 
    vertical-align: middle; 
 
} 
 

 
h2, em 
 
{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    line-height: 14px; /* <-- adjust this */ 
 
} 
 

 
em { 
 
    font-size: 12px; 
 
    font-weight: normal; 
 
    display: block; 
 
    margin-top: 10px; 
 
}

<footer> 
 
    <div class="row-4"> 
 
    <h2 class="footer-frase"> 
 
     McDreamy 
 
     <em class="footer-frase">"It's a beautiful night to save lives"</em> 
 
    </h2>  
 
    </div> 
 
</footer>

BTW: habe ich ein paar Änderungen.

Es gibt auch einen anderen Weg, der Flex-Container verwendet.