当 window 调整大小时 h1 不换行，只是消失

Question

所以我一直在拼命地尝试让我的页面标题覆盖在我的投资组合页面上的 header 图片的中心，水平和垂直（这里是 page with a longer title）。我终于找到了一种方法来获得我想要的 h1 标题，但现在我想把它变大。但是，当我当前将 window 调整为特定宽度时，标题不会换行，当 window 变长时它就会消失。您介意看看是否有解决办法吗？我在想我在某处使用了错误的显示标签，但我不是最好的编码员。

这是 header 图片和标题的 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%);
}

当 window 调整大小时 h1 不换行，只是消失

h1 not wrapping when the window is resized, just disappearing

html

css

php

word-wrap