title: CSS - Aligning Navigation bar with images and text
body: <p>I have a menu (shown in the picture below) which I am trying to correctly align the text with the images (i.e. [img] [text]) as well as "stretch" the whole contents to fit all the width.</p>
  
  <p>Image:
  <img src="https://i.stack.imgur.com/DP89b.png" alt="Navigation Menu"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt;
        &lt;ul&gt;                                        
             &lt;li&gt;&lt;a class="current" href="home.html" title=""&gt;HOME&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="services.html" title=""&gt;TRANSPORT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title=""&gt;ACCOMODATION&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title=""&gt;DEALS&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html" title=""&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#menu{
      width:900px;
      height: 50px;
      clear:both;
      background-color: #f7951e;
      font-family: 'Exo 2', sans-serif;
      text-align: center;
  
  }
  #menu ul{
      font-family: 'Exo 2', sans-serif;
      list-style:none;
      margin-top: 5px;
      margin-bottom: 5px;
      display:block;
      float: left;
      width: auto;
  }
  #menu ul li{
      font-family: 'Exo 2', sans-serif;
      list-style:none;
      display:inline;
      width:auto;
      height:50px;
      line-height:42px;
      font-size:18px;
  }
  #menu ul li a{
      font-family: 'Exo 2', sans-serif;
      font-size: 18px;
      height: auto;
      width: auto;
      float:next;
      text-decoration: none;
      color:#fff;
      padding-left: 40px;
      padding-right: 10px;
  }
  #menu ul li a:hover{
      height:auto;
      width: auto;
      text-decoration:none;
      color: #fff;
  }
  #menu ul li a.current{
      height:auto;
      width: auto;
      text-decoration:none;
      color: #fff;
  }
  
  #menu ul li:nth-of-type(1){
  
      background:url(./images/iconza/house_32x32.png) no-repeat;
      float: start;
      padding-top: 5px;
      padding-bottom: 10px;
  }
  
  #menu ul li:nth-of-type(2){
  
      background:url(./images/iconza/Car.png) no-repeat;
      float: start;
      padding-top: 5px;
      padding-bottom: 10px;
  
  }
  
  #menu ul li:nth-of-type(3){
  
      background:url(./images/iconza/house.png) no-repeat;
      float: start;
      padding-top: 5px;
      padding-bottom: 10px;
  }
  
  #menu ul li:nth-of-type(4){
  
      background:url(./images/iconza/offer.png) no-repeat;
      float: start;
      padding-top: 5px;
      padding-bottom: 10px;
  }
  #menu ul li:nth-of-type(5){
  
      background:url(./images/iconza/mail_32x32.png) no-repeat;
      float: start;
      padding-top: 5px;
      padding-bottom: 10px;
  }
  </code></pre>