h1 not wrapping when the window is resized, just disappearing - php

Question

So I've been trying desperately to get my page title to overlay in the center of the header image, both horizontally and vertically, on my portfolio pages (here's a page with a longer title). I finally found a way to get the h1 title where I want it, but now I want to make it larger. However, when I currently resize the window to certain widths, the title doesn't wrap, it just disappears when it gets to long for the window. Would you mind taking a look and see if there would be a fix for this? I'm thinking that I'm using the wrong display tag somewhere along the line, but I'm not the best coder.
Here is the php for the header image and title (you can ignore the title that is black as I will get rid of that once I figure this one out). I think you should be able to see the rest of the html and css, but if I can provide anything else that may help with figuring this out, please let me know what that might be.
<?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

Your div.aligner is causing the issue - it pushes the h1 out of the div. Remove div.aligner and use the following CSS to vertically centre #projectTitleDiv:
#projectTitleDiv {
position:relative;
top:50%;
transform:translateY(-50%);
}