Как вертикально выравнивать текст к центру в нижнем левом нижнем колонтитуле

Question

Это один ряд из 3 столбцов. Я хочу сделать «h5 класс: колонтитула-маленький» выравнивание по вертикали в DIV «класс: Col-1»

Я обнаружил, что с помощью дисплея: встроенный блок, он сделал текст вертикально выровнен по центру. Но я не понимал, как это возможно? Может кто-нибудь объяснить, почему использование дисплея: встроенный блок работал?

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

вы можете просто сделать это с помощью CSS3 Flexbox концепции

добавить следующие стили к вашему Col-1

• дисплей: сгибать;

• элементы-выходы: центр;

• обоснование-содержание: центр;

Примечание: вы не можете объявить тег заголовка (<h1>, <h2>, и т.д ..) внутри тега абзаца (<p>), поэтому заменить его <span> тег или любые другие теги

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

у вас есть два, чтобы сделать это:

1- Установить линию-высоту.

2- Или установите высоту самой.

.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: Я сделал некоторые изменения.

Существует также другой способ использования гибких контейнеров.