So I have a school project. I must make my own website. I have a problem though: I can't vertically align h1 along 2 images floating left and right.

embedding it in a div and using `vertical-align: middle;` doesn't help. even with a prefix hack that I found [here](https://stackoverflow.com/questions/12415661/using-marginauto-to-vertically-align-div)

here is the source code of my website project:

Html:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>The dankest website on earth</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="CSS/CSS.css">
    </head>
    <body>
        <div id="header">
            <img class="DebugBorder" src="images/lenny.png" title="memes.wav" style="float: right;" width="200px" height="200px" />
            <img class="DebugBorder" src="images/lenny.png" title="memes.wav" style="float: left" width="200px" height="200px" />
            <h1 class="DebugBorder">Sample text</h1>
        </div>        
    </body>
</html>

```

CSS

```
.DebugBorder{ border: 2px red solid}

body {background:linear-gradient(to bottom, darkred, black);background-repeat: no-repeat;}

html {height: 100%;}

h1 {text-align: center; font-size: 4em; font-family: impact; width: 50%; margin: auto; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white;}

#header {height: 200px}

```

I removed any solutions that didn't worked and kept it to my bare minimum.