title: how to center image + text in an li Element
body: <p>basicly I have li elements which contain a small icon an a text, i want to horizontally and vertically center those elements together. However i dont get it working, since Im not really experienced in CSS.</p>
  
  <p>I already managed to vertically center the elements using two spans and line-height. But Im failing with the horizontal centering, since text align doesnt work for spans, and float middle doesnt exist.</p>
  
  <p>You guys have some ideas??</p>
  
  <p>here my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>echo "&lt;li style=\"background-color:#f7f7f7; color:#2EA620;\"&gt;&lt;span class=\"image\"&gt;&lt;img src=\"Images/List/Teams/" . $temp . ".png\" /&gt;&lt;/span&gt;&lt;span class=\"text\"&gt;".$obj_teams-&gt;Name."&lt;/span&gt;&lt;/li&gt;";
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>li {
      width:173px;
      height:30px;
      line-height:30px;
      font:"Myriad Pro";
      font-size:14px;
      padding-left:10px;
      padding-right:10px;
      border-bottom:1px solid;
      border-left:1px solid;
      border-right:1px solid;
      border-color:#CCC;
  }
  
  .image {
      float:left;
      text
  }
  
  .text {
      float:left;
      color:#2EA620;
      line-height:30px;
  }
  </code></pre>
  
  <p>Here an Image of how it looks like now. (If marked the elements which i want to center)</p>
  
  <p><img src="https://i.stack.imgur.com/xJPQz.png" alt="http://i.imgur.com/tI9Vulf.png"></p>