Question

我知道我必须错过一些愚蠢的东西，但我无法弄清楚为什么我的徽标不会集中在我们的移动网站上。请在770像素以下的屏幕宽度下查看此网站：http://www.estiponagroup.com/dev

CSS：

.main-header .logo-and-menu-container .logo-column {
    float: none !important;
    margin: 0 auto !important;
    max-width: 770px !important;
    width: 100% !important;
    display: block;
    min-height: 120px;
}
.header-logo.logo-image img{
    display:block;
    position:relative;
    margin:0 auto;
    width:100%;
    max-width:304px;
}
.main-header .logo-and-menu-container .logo-column::after{ 
    content:'';
    display:block;
    clear:both !important;}

HTML

<div class="logo-column">
            <style>.logo-image { width: 304px; }</style><a class="header-logo logo-image" href="http://www.estiponagroup.com/dev">
<img width="304" height="108" alt="logo" src="//www.estiponagroup.com/dev/wp-content/uploads/eg-logo-300.png">

有人能指出我将这个标志放在中心的方向吗？

Answer 1

将此添加到该媒体查询

@media (max-width: 770px){
      .logo-image {
        max-width: 384px;
        margin-left: auto;
        margin-right: auto;
    }
}

Answer 2

您需要了解css的工作原理。

你所有的元素都会从他们的父母身上吸收一些财产。

因此，在您的情况下，您显示徽标列类别的网站限制了div的大小，因此徽标不能位于中心，因为他的限制是80px且边缘有限。

所以我在浏览器中进行了测试并改为使用它。

将内联[第86行]类.main-header .logo-and-menu-container .logo-column更改为此

width:100%
max-width:100%;

我还在左边和右边添加了一个边距，并设置为显示块，这样做（提高宽度尺寸并将＆lt; a＆gt;元素设置为下面的代码，允许你的徽标在中间。

 <a style="margin-right: auto; margin-left: auto; display: block;" href="http://www.estiponagroup.com/dev" class="header-logo logo-image">

Ps。：您应该将css中的“硬代码”更改为css文件。

检查结果：http://snag.gy/pfsk1.jpg

Answer 3

删除规则：

media="all" .header-logo.logo-image
display: block;

并添加：

margin: 0 auto;
display: block;

图像上的

（适用于正确的介质尺寸）。

Answer 4

在媒体查询

中的徽标周围添加margin: 0 auto;

.main-header .logo-and-menu-container .logo-image {
    margin: 0 auto;
}

Answer 5

这是一个完整而完美的参考，可以集中每件事。 centering elements with css

标题中居徽标

5 个答案: