html - 将 Logo 从右侧 Html CSS 移至中心

Question

我在页面右侧有一个 Logo 。在调整大小(使窗口变小)时，我想将 Logo 移动到页面的中心。

这是我的 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

移除 float 并使用 text-align 使 img 居中。您需要像这样在 media query 中进行这些更改:

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

---

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