[英].table-cell width goes to 100%, <a><img> is clickable in full width
I needed to center the logo horizontally and vertically in the center so I used .table
and .table-cell
from bootstrap. 我需要将徽标水平和垂直地居中居中,因此我使用了
.table
和.table-cell
。 The problem is, while the image is perfectly aligned in the center, the .table-cell
goes 100% of it's parents length and the full width is clickable if wrapped in a <a href>
. 问题是,当图像在中心完美对齐时,
.table-cell
将变为其父级长度的100%,并且如果将其包裹在<a href>
则可以单击整个宽度。
The code: 编码:
<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 -->
I hope I understood your question correctly. 希望我能正确理解您的问题。
If you want to align a div element or something horizontally and vertically too, you can use this CSS to do either of these: 如果您也想水平或垂直对齐div元素或其他元素,则可以使用此CSS来执行以下任一操作:
Use of absolute positioning 使用绝对定位
.parentClass{ position: relative; }
.childClass{ /* The div you want to center */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Use of flex 使用flex
.childClass{ /* The div you want to center */
display: flex;
align-items: center;
justify-content: center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.