html - 文本未与要在右侧对齐的列表的图像和背景定位对齐

Question

我的 html 和 css 中的以下内容需要修复。

文字相对于图片居中 应该放在右边。

http://jsfiddle.net/9xKJm/1/

html

 <div class="login-wrapper">
            <div class="login-header">Choose an account</div>
            <div class="clear-both"></div>
            <ul class="user-account">
              <li>
                <img src="https://lh3.googleusercontent.com/-SI4p5-_t75A/AAAAAAAAAAI/AAAAAAAAAAA/PdNPwK9En0o/photo.jpg?sz=46">
                <span class="account-name">Ali Zafar</span>
              </li>
              <li>
                <img src="https://lh3.googleusercontent.com/-SI4p5-_t75A/AAAAAAAAAAI/AAAAAAAAAAA/PdNPwK9En0o/photo.jpg?sz=46">
                <span class="account-name">Ali Zafar</span>
              </li>
              <li>
                <img src="https://lh3.googleusercontent.com/-SI4p5-_t75A/AAAAAAAAAAI/AAAAAAAAAAA/PdNPwK9En0o/photo.jpg?sz=46">
                <span class="account-name">Ali Zafar</span>
              </li>

            </ul>


          </div>  

CSS

/*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 > img {
  width:50px;
  height:50px;
  -webkit-border-radius: 50%;
}

.user-account li > span.account-name{
 padding-top: 3px;
 color: #427FED;

}


.user-account li > a:after { content: '>'; } 

虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本虚拟文本

Answer 1

检查一下。我添加了 width和 height在你的li和 vertical-align:middle在两个<img>和 <span> .

Fiddle

CSS

/*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;
        padding:0;
    margin:0;
}
.user-account li {
    background: url("https://ssl.gstatic.com/accounts/ui/arrow_right_1x.png") no-repeat scroll 95% 50% transparent;
    list-style-type: none;
    padding: 1em 2em;
    vertical-align: middle;
    border-bottom:1px #EFEFEF solid;
    display:block;
    position:relative;
    
}
.user-account li > img {
    width:50px;
    height:50px;
    -webkit-border-radius: 50%;
     vertical-align: middle;
}
.user-account li > span.account-name {
    vertical-align: middle;
    color: #427FED;
}
.user-account li > a:after {
    content:'>';
}