.table 셀 폭 <a><img> 그래서 부트 스트랩에서 <code>.table</code> 및 <code>.table-cell</code> 사용

Question

내가 중심에 수평 및 수직으로 로고가 중앙에 필요한 전체 폭 클릭하고, 100 %로 진행한다. 문제는 이미지가 가운데에 완벽하게 정렬되어있는 동안 .table-cell은 부모 길이의 100 %가되고 <a href>으로 감싸면 전체 너비를 클릭 할 수 있다는 것입니다.

코드 :

<div class="header-content table"> 
    <div class=" table-cell"> 
     <?php 
      if(function_exists('the_custom_logo')) { 
       if(has_custom_logo()) { 
        $custom_logo_id = get_theme_mod('custom_logo'); 
        $image = wp_get_attachment_image_src($custom_logo_id , 'full'); 

        echo '<a href="'.get_home_url().'"><div class="harmony-logo background-image" style="background-image: url('.$image[0].');">'; 

        echo '</div></a>'; 
       } else { 
        echo '<h1 class="site-title"><?php bloginfo("name"); ?></h1>'; 
       } 
      } ?> 

    </div><!-- .table-cell --> 
</div><!-- .header-content --> 

Answer 1

내가 제대로 질문을 이해 바랍니다.

너무 수평 및 수직 div 요소 또는 무언가를 정렬 할 경우이 CSS를 사용할 수 있습니다 다음 중 하나를 수행합니다 : 플렉스

의

.parentClass{ position: relative; } 
.childClass{ /* The div you want to center */ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

사용 절대 위치의

이

사용

.childClass{ /* The div you want to center */ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}