[英]Centering image in animated div - sticky to left side of screen
I'm making a sidebar live chat button, however I'm unable to make the image which vertically says: "Live chat" be in the center of the container. 我正在制作一个侧边栏实时聊天按钮,但是我无法使垂直显示的图像:“实时聊天”位于容器的中央。
Despite some efforts, I'm unable to make the image show in the correct place. 尽管做出了一些努力,但我无法在正确的位置显示图像。
HTML 的HTML
<a id="xfmd" href="#">
<span class="image"></span>
</a>
CSS 的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%
}
}
This answer has worked for me, and is by @TM Dinesh - it involves removing media queries. 这个答案对我有用,由@TM Dinesh提供-它涉及删除媒体查询。
HTML 的HTML
<a id="xfmd" href="#">
<span class="image"></span>
</a>
CSS 的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,
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.