响应式网站中的徽标中心？

Question

您好使用子主题，让所有其他元素都使用响应式设计 - 只是不是徽标吗？

link to site

目前使用此代码;

header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
margin-left: 390px;
}

非常感谢

Answer 1

这两行

display: block;
margin: 0 auto;

是开始集中精神的好地方。

不工作的常见原因是元素是float或者position设置为静态以外的东西。在这些情况下，您可以尝试float: none;，position: static;或position: relative;。对于relative，请务必同时设置相关的top，bottom，left和right属性。

在许多情况下，这些都不会有所帮助，但在您的情况下，在大多数简单的情况下，上述内容都会帮助您。

Answer 2

试试CSS

header#masthead hgroup .logo {
display: block;
float: left;
max-width: 100%;
position: relative;
left: 50%;
margin-left: -150px;
}
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
}

不需要留下大余量。 .logo div上的代码将徽标在屏幕上移动50％，使其完全居中，然后你必须用左边距离删除一半宽度：-150px。

我在你的网站上尝试了这些代码，所以它应该可行。希望它有意义。