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 Dinesh提供 - 它涉及删除媒体查询。

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,
}

在动画div中居中图像 - 粘在屏幕左侧

1 个答案: