CSS 수직 정렬이 올바르게 작동하지 않습니다.

Question

CSS 및 부트 스트랩을 사용하여 웹 사이트를 개발하고 verticle-align : middle; 어떻게 작동해야하는지는 모르겠지만이 주제에 대한 연구에서 항목을 세로로 정렬하는 해결책을 찾았지만 이전 브라우저에서는 작동하지 않을 수 있습니다.

이 나는 ​​그들이에있는 열 이미지를 중심으로 그 일을 찾을 것입니다.

.logo-container{ 
    height: 100%; 
    display: flex; 
    align-items : center; 
    .logo{ 

    } 
} 
} 

이 내가 사용하는 시도했지만 작동시킬 수없는 것입니다.

section#providers{ 
.logo-container{ 
    height: 100%; 
    display: table; 
    .logo{ 
     width: 100%; 
     display: table-cell; 
     vertical-align: middle !important; 
    } 
} 
} 

이

는 HTML

<section id="providers"> 
 
\t <div class="container"> 
 
\t \t <div class="row" id="logos"> 
 

 
\t \t \t <div class="col-2"> 
 
\t \t \t \t <div class="logo-container"> 
 
\t \t \t \t \t <div class="logo"> 
 
\t \t \t \t \t \t <img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/uh.png" class="img-fluid"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-2"> 
 
\t \t \t \t <div class="logo-container"> 
 
\t \t \t \t \t <div class="logo"> 
 
\t \t \t \t \t \t <img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/test1.png" class="img-fluid"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t </div> 
 
</div> 
 
</section>

난 당신이 테이블로 표시 할 부모를 설정 한 다음, 아이가로 표시 할 필요 연구 것과

입니다 표 셀과 세로 algin을 가운데로 설정합니다. 그림에서 나는 무엇을 놓치고 있습니까?

Answer 1

상위 div의 위치가 누락되었습니다. relative;

section#providers{ 
.logo-container{ 
    position: relative; 
    height: 100%; 
    //display: flex; 
    //align-items : center; 
    display: table; 
    .logo{ 
     width: 100%; 
     display: table-cell; 
     vertical-align: middle !important; 
    } 
} 
}