徽标保持中心

Question

我在Firefox中查看p-ng.com，当使用书签侧边栏查看时，徽标不居中。

侧边栏示例：

当我查看没有书签边栏的页面时，它看起来像这样。

没有侧边栏的示例：

即便如此，徽标似乎并未保持居中。 感谢您的任何建议。

CSS

.site-title {
font-size: 32px;
font-weight: 400;
line-height: 1.2;
}

.site-title a,
.site-title a:hover {
margin:0;
}

.header-image .site-title > a {
background: url(images/logo.png) no-repeat top center;
margin-left: 625px;  
margin-top: -95px;   
width: 87px;
height: 87px;
width: 100%;
position: absolute;
background:#E5E5E5;
overflow: auto;
}

Answer 1

你有太多不必要的声明，它不以视口为中心的原因是因为你有position: absolute和一堆不需要的边距。

将您的CSS更改为此。

<强> CSS

.header-image .site-title > a {
    background-position: url(images/logo.png) no-repeat top center;
    margin: 0 auto;
    width: 87px;
    height: 87px;
    background: #E5E5E5;
}

Answer 2

我不明白你为什么拥有所有不同的边距，宽度，最后是position: absolute，但这里有一个简单的方法来展示你的徽标：

.header-image .site-title > a {
    position: absolute;
    width: 87px;
    height: 87px;
    left: 50%;
    transform: translateX(-50%);    
    background:#E5E5E5;    
}

如果它也需要在其容器中垂直居中，您可以添加：

.header-image .site-title > a{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

有关transform属性的浏览器支持（以及查看您需要的供应商前缀），请参阅：http://caniuse.com/#search=transform

Answer 3

Position您的徽标relative到width: 100%的容器，然后您可以设置margin: 0 auto - 这样您也可以丢失margin-left属性。< / p>

示例：

.parentContainer {
width: 100%;
}

.logo {
margin:0 auto;
position: relative
}