.table-cell宽度达到100％， is clickable in full width

Question

我需要将徽标水平和垂直居中放在中心，所以我使用.table和.table-cell来自bootstrap。问题是，虽然图像在中心完全对齐，但.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%);
}

使用flex

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