Question

我在页面右侧有一个徽标。调整大小（使窗口变小）我想将徽标移动到页面的中心。

这是我的CSS

.headerlogo {
    position: relative;
    float: right;
    margin-right: 5%;
    margin-top: 50px;
    z-index: 999;
}

.getapp-nav-img{
    height: 60px;
        margin: auto;
}

这是我的HTML

<div class="headerlogo" style="">
                    <div class="social-nav">
                        <a href='#'><img class="getapp-nav-img" src='img/logo.png'/></a>
                    </div>
            </div>

它没有动摇。我怎样才能做到这一点？

Answer 1

删除浮动并使用text-align将img居中。您需要在media query范围内进行这些更改：

@media (max-width: 768px) {
    .social-nav {
       text-align: center;
    }
    .headerlogo {
        float: none;
    }
}

链接到jsFiddle：https://jsfiddle.net/AndrewL32/e0d8my79/108/

Answer 2

您可以使用以下媒体查询：

＆＃13;

.headerlogo {
    width: 50px;
    position: relative;
    float: right;
    margin: 50px 5% 0 auto;
    z-index: 999;
}

.getapp-nav-img {
    height: 60px;
    margin: auto;
} 

@media (max-width: 480px) {
  .headerlogo {
    float: none;
    text-align: center;
    margin: 50px auto 0 auto;
  }
}

＆＃13;

<div class="headerlogo" style="">
  <div class="social-nav">
    <a href='#'><img class="getapp-nav-img" src='https://cdn0.iconfinder.com/data/icons/black-icon-social-media/256/099280-blinklist-logo.png'/></a>
  </div>
</div>

＆＃13;

这是一个更容易测试的小提琴：https://jsfiddle.net/ajjr3u3n/2/

将徽标从右侧Html CSS移动到中心

2 个答案: