title: how to align text under image in css menu
body: <p>I want to align menu text at the bottom of image how to i achieve it?</p>
  
  <p><strong>Expected output:</strong></p>
  
  <pre><code>Image    Image    Image    Image
  [menutext]    [menutext][menutext]    [menutext]
  </code></pre>
  
  <p><strong>Actual output :</strong></p>
  
  <pre><code>Image[menutext]      Image[menutext]      Image[menutext]      Image[menutext]  
  </code></pre>
  
  <p><strong>my Css Code:</strong></p>
  
  <pre><code>#vilaniHeader
  {
      margin: 0;
      padding: 0;
      height: 80px;
      background-color: Black;
  }
  
  #vilaniHeader h1
  {
      padding-left: 15%;
      font: Arial;
      font-size: 30px;
      color: #ffffff;
      font-weight: bold;
      float: left;
  }
  #vilaniHeader #menu
  {
      color: #ffffff;
      font: Arial;
      font-size: 18px;
      font-weight: bold;
      padding-top: 30px;
      padding-left: 30%;
  }
  
  #vilaniHeader #menu ul
  {
      list-style: none;
      margin: 0;
      padding: 0;
      padding-right: 300px;
      padding-bottom: 300px;
  
  }
  #vilaniHeader #menu li
  {
      display: inline;
      margin: 0 15px 0 15px;
      float: none;
      text-align:center;
  
  }
  
  #vilaniHeader #menu a
  {
      text-decoration: none;
      color: #ffffff;
  }
  #vilaniHeader #menu .menuHome
  {
      color: red;
      clear:both;
      padding-top:50px;
      background-image:url:("Styles/menuHome.png") ;
      vertical-align:text-top;
  }
  </code></pre>
  
  <p><strong>and My HTML code</strong> </p>
  
  <pre><code>&lt;div id="vilaniHeader"&gt;
                  &lt;h1&gt;
                     Comany name
                  &lt;/h1&gt;
                  &lt;div id="menu"&gt;
                   &lt;ul&gt;
                   &lt;li class="menuHome"&gt;&lt;img src="Styles/menuHome.png" /&gt;Home&lt;/li&gt;
                   &lt;li&gt;&lt;a href="About.aspx"&gt;Car&lt;/li&gt;
                   &lt;li&gt;&lt;a href="About.aspx"&gt;Mobile&lt;/li&gt;
                   &lt;li&gt;&lt;a href="About.aspx"&gt;OldThings&lt;/li&gt;
                   &lt;li&gt;&lt;a href="About.aspx"&gt;Matrimoni&lt;/li&gt;
                   &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I want menu text should be align at the bottom of the image plese help me to do that.</p>