title: Text not aligning in the center and not changing size
body: <p>So my font is not changing size or being center aligned. I've tried heaps of stuff but without results. I'd like the code (text) centered, but it currently is being aligned to the left. I'd also like the text to be a lot bigger. Please have a look at my code!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  ...
  
  &lt;div class="qt"&gt;
      &lt;?
          $filename = "quotes.txt";
          function RandomLine($filename) { 
              $lines = file($filename); 
              echo $lines[array_rand($lines)]; 
          } 
          echo RandomLine($filename);
      ?&gt;
  &lt;/div&gt;
  &lt;div class="home"&gt;
      &lt;a href="http://www.jonsnow.net/index.php" id="h1"&gt;&lt;/a&gt;
      &lt;a href="http://www.jonsnow.net/gallery/" id="h2"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.home a {
      float: left;
      display: inline;
  }
  
  div.home img {
      float: top;
      display: inline;
  }
  
  div.home {
      position: absolute;
      top: 20%;
      bottom: 0;
      left: 0;
      right: 0;
      width: 1000px;
      margin: auto;
  }
  
  div.qt {
      text-align: "center";
      font-family: "Vivaldi";
      font-size: "44 px";
      color: "#000000";
      position: absolute;
      top: -60%;
      bottom: 0;
      left: 0;
      right: 0;
      width: 1000px;
      margin: auto;
      height: 62px;
      display: inline;
  }
  
  div.home #h1 {
      width:  500px;
      height: 350px;
      display: inline;
      background-image: url('header1.jpg');
  }
  
  div.home #h1:hover {
      background-image: url('header1hover.jpg');
  }
  
  div.home #h2 {
      width:  500px;
      height: 350px;
      display: inline;
      background-image: url('header2.jpg');
  }
  
  div.home #h2:hover {
      background-image: url('header2hover.jpg');
  }
  </code></pre>