title: Why won't list items align at bottom of containing element?
body: <p>I'm trying to have some links align at the bottom of their containing element. I added vertical-align text-bottom to the containing element. I get nothing.</p>
  
  <p>Here is the contents in the main html file. </p>
  
  <pre><code> &lt;div class="mainHeader"&gt;
  
   &lt;li&gt;&lt;a class="mainHeaderLink" href="book.html"&gt;BOOK A ROOM&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a class="mainHeaderLink" href="promotions.html"&gt;PROMOTIONS&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a class="mainHeaderLink" href="meetings.html"&gt;MEETINGS &amp; EVENTS&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a class="mainHeaderLink" href="about.html"&gt;ABOUT STIL&lt;/a&gt;&lt;/li&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p>Here is my css file. (the css works, just not the align property)</p>
  
  <pre><code>@charset "UTF-8";
  /* CSS Document */
  
  
  body 
  {
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  }
  
  
  div.mainHeader
  {
  background-color: #006;
  background: solid;
  height:100px;
  text-align: center;
  vertical-align: text-bottom;
   }
  
  
   a.mainHeaderLink:link
   {
  text-decoration: none;
  font-weight: bold;
  color: #FFF;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   }
  
   a.mainHeaderLink:visited
   {
  text-decoration: none;
  font-weight: bold;
  color: #FFF;
  font-size: 16px;
   }
  
   a.mainHeaderLink: active
   {
  text-decoration: none;
  font-weight: bold;
  color: #CCC;
  font-size: 16px;
   }
  
   a.mainHeaderLink:hover
   {
  text-decoration: none;
  font-weight: bold;
  color: #CCC;
  font-size: 16px;
   }
  
   li
   {
  display:inline;
  margin-left: 50px;
  
   }
  </code></pre>