html - .table-cell 宽度变为 100%， 可全宽点击

Question

我需要将 Logo 水平和垂直居中，所以我使用了 .table和 .table-cell从 Bootstrap 。问题是，虽然图像完全居中对齐，.table-cell如果包裹在 <a href> 中，则达到其父项长度的 100%，并且整个宽度是可点击的.

代码:

<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;
}