php - 调整窗口大小时 h1 不换行，只是消失

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