.table-cell 宽度变为 100%，<a><img> 可全角点击答案

【问题标题】：.table-cell width goes to 100%, <a><img> is clickable in full width.table-cell 宽度变为 100%，<a><img> 可全角点击
【发布时间】：2017-12-15 23:59:44
【问题描述】：

我需要将徽标水平和垂直居中居中，因此我使用了 bootstrap 中的 .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 -->

【问题讨论】：

标签： html css wordpress css-tables

【解决方案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;
}

【讨论】：