Fix header so that it's always vertically centered

index.php

@@ -159,7 +159,9 @@
                 <img src="<?php echo getUrlWithVersion("images/home.png") ?>" alt="<?php echo localize ("home.alternate") ?>" />
         </a>
         <img class="headright" id="searchImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" />
-        <h1><?php echo htmlspecialchars ($currentPage->title) ?></h1>
+        <div class="headcenter">
+            <h1><?php echo htmlspecialchars ($currentPage->title) ?></h1>
+        </div>
         <div id="tool" <?php if ($withToolbar) echo 'style="display: none"' ?>>
             <div style="float: left; width: 60%">
                 <form action="index.php" method="get">

style.css

@@ -79,12 +79,23 @@ header {
 	float: left;
 }
 
+.headcenter
+{
+float:none;
+margin:auto;
+text-align:center;
+height:70px;
+display:table;
+}
+
 header h1{
-	float:none;
-	padding-top:25px;
-text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
-             0px 8px 13px rgba(0,0,0,0.1),
-             0px 18px 23px rgba(0,0,0,0.1);
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    line-height: 100%;
+    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
+                 0px 8px 13px rgba(0,0,0,0.1),
+                 0px 18px 23px rgba(0,0,0,0.1);
 }
 
 .headright {