。表のセル幅は100％になります。<a><img>は全角でクリックできます

Question

ロゴを中央に水平に配置する必要がありましたので、ブートストラップから.tableと.table-cellを使用しました。問題は、画像が中央で完全に揃えられている間に、.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; 
}