title: tabs using css html in phonegap
body: <p>I am making tabs using css and html for mobile devices. My current code show some weird behavior. My current code shows the tabs which is shown in image below. You ca see that tabs are all misplaced and the icon inside these tabs are slightly on the right side but I want this to be in the center of the tab. I can move that icons towards left to make it appear in the center in photoshop but again if I test this app on larger screen mobile devices then this icon will appear on the left side. I want them to be always in the center. So please tell me how can I make this more better tabs as normal mobile apps have?</p>
  
  <p>here is mu html code</p>
  
  <pre><code>&lt;footer&gt;
      &lt;ul&gt;
          &lt;li class="tabs"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="tabs"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="tabs"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>here is my css</p>
  
  <pre><code>footer {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 0;
    background: #535353; 
  }
  footer ul {
     list-style-type: none;
     margin: 0;
     padding: 0; 
  }
  footer ul li {
    display: inline-block;
    width: 31%;
    height: 50px; 
  }
  footer ul li a {
    display: block;
    text-decoration: none;
    height: 100%;
    width: 100%;
    background: #fff;
    background: url(../../../img/tabs.png) top left no-repeat; 
  }
  </code></pre>
  
  <p>here is the image:</p>
  
  <p><img src="https://i.stack.imgur.com/H49oC.png" alt="image"></p>
  
  <p><strong>Update</strong></p>
  
  <p>Here is my new css</p>
  
  <pre><code>footer {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 0;
  background: #ccc; }
  footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; }
    footer ul li {
      display: block;
      float: left;
      width: 33.33%;
      line-height: 50px;
      text-align: center;
      overflow: hidden; }
      footer ul li a {
        display: block;
        text-decoration: none;
        margin: 1px;
        height: 100%;
        width: 100%;
        background: url(../../../img/tabs.png) center no-repeat;
        /*
        &amp;.home {
          background: url(../../../img/tabs.png) top left no-repeat;
        }
        &amp;.profile {
          background: url(../../../img/tabs.png) top left no-repeat;
        }
        &amp;.cam {
          background: url(../../../img/tabs.png) top left no-repeat;
        }*/ }
        footer ul li a.current {
          margin-top: 5%;
          height: 80%;
          width: 80%;
          background-color: #ccc;
          text-indent: -9999px;
          border-radius: 5px;
          -webkit-box-shadow: inset 0 0 50px #666;
          -moz-box-shadow: inset 0 0 50px #666;
          box-shadow: inset 0 0 50px #666; }
  </code></pre>