标题元素[徽标和菜单]根据屏幕分辨率更改位置

Question

我有我的这个网站www.virtualcloudguru.com。现在问题是标题（徽标和菜单）。我为徽标和菜单定义了一个固定的100px填充，但如果屏幕分辨率发生变化，它将向左/右移动。

现在有两种方式

1. 使两者在屏幕中央对齐
2. 根据屏幕分辨率使2个元素改变位置。

我复制了the code in jsfiddle。虽然不完整

Answer 1

如果要根据屏幕分辨率使元素更改位置，可以使用CSS媒体查询。以下是适用于您的网页的示例：

@media screen and (max-width: 600px) {
    #header .top-logo, #header ul {
        padding-left: 0;
    }
}

你可以认为@media行类似于＆＃34; if＆＃34; CSS声明。在这种情况下，它说如果媒体是一个屏幕（即没有打印等）并且最大宽度为600像素，则在标题中为左边填充0和列表中的列表。

换句话说，此@media部分中的任何CSS规则仅在浏览器的可见窗口宽度为600像素或更小时才有效，在这种情况下，它们会覆盖任何以前的CSS规则。

将此添加到CSS的末尾并尝试缩小浏览器的窗口以查看效果。

编辑：我忘了添加一个以上@media部分可以。例如，您可以添加包含max-width: 480px（或类似）的第二部分，其中包含较小屏幕的规则。

编辑2：使徽标和菜单居中

徽标的宽度是固定的，因此我们可以将其设为块元素并使用margin: 0 auto，如下所示：

#header .top-logo {
    display: block;
    margin: 0px auto;
    padding: 0;
    width: 425px;
}

请务必删除现有的float: left。

对于菜单，这只是文字，因此我们可以使用text-align: center。同样，请记住删除li元素上的现有float: left - 我们将使用display: inline代替。

#header ul {
    padding: 0;
    text-align: center;
}
#header ul li {
    display: inline;
}

顺便说一下，请在实施之前仔细检查这个跨浏览器。

Answer 2

请使用此CSS

#header {
    width: 1130px;
    padding: 0;
}

#header .top-logo {
    padding: 0;
}

截图

Answer 3

如果您希望标题始终保持在相对于页面主体的相同位置，则将两者放入公共div中，并应用您应用于主体的width：和margin：属性，到那个容器。

您也可以使用body元素作为公共容器，并将宽度和边距应用于此，作为替代方案。