Question

所以我一直在努力让我的页面标题覆盖在标题图像的中心，水平和垂直，在我的投资组合页面上（这里是page with a longer title）。我终于找到了一种方法来获得我想要的h1标题，但现在我想让它更大。但是，当我当前将窗口调整到某个宽度时，标题不会换行，当窗口变长时它就会消失。你介意看一下，看看有没有解决这个问题？我想我在某处使用了错误的显示标签，但我不是最好的编码器。

这是标题图片和标题的php（你可以忽略黑色的标题，因为一旦我弄清楚了这个，我将摆脱它）。我认为你应该能够看到html和css的其余部分，但如果我能提供其他可能有助于解决这个问题的内容，请告诉我这可能是什么。

<?php get_header(); ?>

<div id="middle" class="clearfix">      

    <?php // Get the header image
    $hi = getHeaderImage();         
    if($hi) :       
    ?>      
    <div id="pageHeadImage" class="" >  
        <div class="inside" style="<?php echo 'background-image: url('.$hi.');' ?>">
        <div id="projectTitleDiv">
            <span class="aligner"></span>
            <h1 class="projectTitle"><?php the_title(); ?></h1>
        </div>
        </div>                  
    </div>
    <?php endif;?>

Answer 1

您的div.aligner导致问题 - 它将h1推出div。删除div.aligner并使用以下CSS垂直居中#projectTitleDiv：

#projectTitleDiv {
position:relative;
top:50%;
transform:translateY(-50%);
}

当窗口调整大小时，h1没有换行，只是消失了

1 个答案: