在动画div中定位图像 - 粘贴到屏幕左侧

Question

我正在制作一个侧边栏实时聊天按钮，但是我无法制作垂直图像：“实时聊天”位于容器的中心。

尽管做了一些努力，但我无法将图像显示在正确的位置。

HTML

<a id="xfmd" href="#"> 
    <span class="image"></span> 
</a> 

CSS

#xfmd 
{ 
    position:fixed; 
    display:block; 
    top:40%; 
    width:35px; 
    height:95px; 
    padding:5px; 
    left:-10px; 
    z-index:10; 
    cursor:pointer; 
    background-color:#0094e8; 
    -webkit-border-top-right-radius:5px; 
    -webki-border-bottom-right-radius:5px; 
    -moz-border-radius-topright:5px; 
    -moz-border-radius-bottomleft:5px; 
    border-top-right-radius:5px; 
    border-bottom-right-radius:5px 
} 

#xfmd .image 
{ 
    display:block; 
    width:17px; 
    height:83px; 
    margin:1px 6px 6px 8px; 
    background:url(http://daemex.com/assets/img/ui.png) no-repeat 0 
} 

#xfmd:hover 
{ 
    left:0; 
    transition:.3s; 
    -webkit-transition:.3s, 
} 

@media (max-width:992px) { 
    #xfmd 
    { 
     top:35% 
    } 
} 

@media (max-width:768px) { 
    #xfmd 
    { 
     width:25px; 
     background-position:10px 50%; 
     top:30% 
    } 
} 

@media (max-height:420px) { 
    #xfmd 
    { 
     top:20% 
    } 
} 

Answer 1

这个答案已经为我工作，并且是@TM迪内希 - 这包括去除媒体查询。

HTML

<a id="xfmd" href="#"> 
    <span class="image"></span> 
</a> 

CSS

#xfmd 
{ 
    position:fixed; 
    display:block; 
    top:40%; 
    width:35px; 
    height:95px; 
    padding:5px; 
    left:-10px; 
    z-index:10; 
    cursor:pointer; 
    background-color:#0094e8; 
    -webkit-border-top-right-radius:5px; 
    -webki-border-bottom-right-radius:5px; 
    -moz-border-radius-topright:5px; 
    -moz-border-radius-bottomleft:5px; 
    border-top-right-radius:5px; 
    border-bottom-right-radius:5px; 
    vertical-align:middle; 
} 

#xfmd .image 
{ 
    display:block; 
    width:17px; 
    height:83px; 
    margin:1px 6px 6px 8px; 
    background:url(http://daemex.com/assets/img/ui.png) no-repeat 0; 
    vertical-align: middle; 
} 

#xfmd:hover 
{ 
    left:0; 
    transition:.3s; 
    -webkit-transition:.3s, 
}