0

我尝试在 wordpress 模板上编辑的标题有点失败。基本上，我有一个位于标题中心的徽标图像。我希望这个徽标充当主页的链接。我已经设法做到这一点，但目前，标题的整个宽度充当链接，因为我只希望链接包含图像（即只是图像的尺寸）。我不知道为什么会这样，我知道我会做一些愚蠢的事情，但是反复试验并没有让我快速到达任何地方。

任何帮助将不胜感激。

这是html/php

<!-- BEGIN #header -->
    <div id="header">

        <!-- BEGIN .row -->
        <div class="row">

            <!-- BEGIN .sixteen columns -->
            <div class="sixteen columns">

                <?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) { ?>
                    <h1 id="custom-header">
                            <a href="<?php echo home_url(); ?>/" title="Home">
                                    <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo('name'); ?>" />
                                        </a>
                                    <?php bloginfo( 'name' ); ?></h1>

                <?php } ?>

            <!-- END .sixteen columns -->
            </div>

        <!-- END .row -->
        </div>

        <!-- BEGIN .row -->
        <div class="row">
                    ......

CSS：

#header {
line-height: 0;
margin: 0px;
position: relative;
z-index: 99;
}


#custom-header {
display: block;
padding: 0px;
font-size: 0;
text-indent: -999em;
line-height: 0;
margin:0px;
padding: 0px;
overflow: hidden;
z-index: 8;
}

#custom-header img {
display:block;
margin: 0px auto 0px;
height: auto;
text-align: center;
padding: 0px;
vertical-align: bottom;
}

.row { 
width: 100%; 
margin: 0 auto; 
}


.row .sixteen   { width: 100%; }
4

1 回答 1

2

用这个

#custom-header a{
    display:block;
    width:280px;
    height:80px;
    margin:0 auto;
}

这是更新的jsFiddle 文件

于 2013-09-02T11:15:18.980 回答