title: Text is not being aligned with image and background positioning of List to be aligned on the right
body: <p>Following things in my html and css needs to be fixed.</p>
  
  <p>text be in the middle with respect to image and 
  arroe to be placed on the right.</p>
  
  <p><a href="http://jsfiddle.net/9xKJm/1/" rel="nofollow">http://jsfiddle.net/9xKJm/1/</a></p>
  
  <p>html</p>
  
  <pre><code> &lt;div class="login-wrapper"&gt;
              &lt;div class="login-header"&gt;Choose an account&lt;/div&gt;
              &lt;div class="clear-both"&gt;&lt;/div&gt;
              &lt;ul class="user-account"&gt;
                &lt;li&gt;
                  &lt;img src="https://lh3.googleusercontent.com/-SI4p5-_t75A/AAAAAAAAAAI/AAAAAAAAAAA/PdNPwK9En0o/photo.jpg?sz=46"&gt;
                  &lt;span class="account-name"&gt;Ali Zafar&lt;/span&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;img src="https://lh3.googleusercontent.com/-SI4p5-_t75A/AAAAAAAAAAI/AAAAAAAAAAA/PdNPwK9En0o/photo.jpg?sz=46"&gt;
                  &lt;span class="account-name"&gt;Ali Zafar&lt;/span&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;img src="https://lh3.googleusercontent.com/-SI4p5-_t75A/AAAAAAAAAAI/AAAAAAAAAAA/PdNPwK9En0o/photo.jpg?sz=46"&gt;
                  &lt;span class="account-name"&gt;Ali Zafar&lt;/span&gt;
                &lt;/li&gt;
  
              &lt;/ul&gt;
  
  
            &lt;/div&gt;  
  </code></pre>
  
  <p>css</p>
  
  <pre><code>/*Login screen*/
  .login-wrapper{
    width:50%;
    margin:0 auto;
  }
  
  .login-header{
    color:#FFFFFF;
    font-size:1.5em;
    padding:.8em 0 .2em .2em;
    background:#2380DE;
  }
  
  .user-account{
    list-style:none;  
    background:#FFFFFF
  
  }
  
  .user-account li{
      background: url("https://ssl.gstatic.com/accounts/ui/arrow_right_1x.png") no-repeat scroll 0 0 transparent;
    list-style-type: none;
    padding: 1em;
    vertical-align: middle;
    border-bottom:1px #EFEFEF solid;
  }
  
  .user-account li &gt; img {
    width:50px;
    height:50px;
    -webkit-border-radius: 50%;
  }
  
  .user-account li &gt; span.account-name{
   padding-top: 3px;
   color: #427FED;
  
  }
  
  
  .user-account li &gt; a:after { content: '&gt;'; } 
  </code></pre>
  
  <p>dummy text dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text</p>