在動畫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, 
}