Question

我一直试图让我的CSS正确无误，这样我就可以在浏览器中纵向和横向居中，无论浏览器的大小和屏幕分辨率如何。

最重要的是，我试图在页面底部有一个静态页脚，文本左侧，中间和右侧。您可以在http://holiday.lighting

看到此次尝试

我正在尝试使用HTML5和CSS来完成所有操作，但似乎我必须给它一些奇怪的CSS，特别是对于要正确对齐的页脚文本，否则它不在屏幕上。

这是我目前的CSS。

html, body {
    background-color: #ffffff;
    color: #ffffff;
    padding: 0;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.purple {
    color: #662d91;
}

.green {
    color: #22b24c;
}

.gray {
    color: #b3b2b2;
}

logo {
    background: white;
    color: black;
    border-radius: 1em;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.logo {
    max-width: 50%;
}

.text {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: xx-large;
    font-weight: bold;
    color: #b3b2b2;
    /* 
        Purple: #662d91
        Green: #22b24c
        Gray: #b3b2b2
    */
}

footer {
    background-color: #662d91;
    width: 100%;
    bottom: 0;
    position: fixed;
    padding: 4px;
    left: 0;
    font-size: x-small;
}

.copyright {
    display: inline;
}

.footerlinks {
    color: #ffffff;
    width: 100%;
    position: fixed;
    text-align: right;
    margin: 0;
    padding: 0;
    display: inline;
    max-width: 1470px;
}

a {
    padding-left: 4px;
    padding-right: 4px;
}

a:link {
    color: #ffffff;
}

a:visited {
    color: #ffffff;
}

a:hover {
    color: #b3b2b2;
}

a:active {
    color: #ffffff;
}

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Holiday Lighting, LLC</title>
    <link href="styles/holidaylighting.css" rel="stylesheet" />
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <logo><img class="logo" src="images/logo.png" alt="Holiday Lighting Logo" />
        <div class="text">Coming Soon!</div></logo>
    </div>
    <footer><div class="copyright">&copy;2016 Holiday Lighting, LLC</div>
    <div class="footerlinks"><a href="mailto:support@holiday.lighting">Contact Us</a>&bull;<a href="tos.html">Terms of Service</a>&bull;<a href="privacy.html">Privacy Policy</a></div></footer>
</body>
</html>

Answer 1

正如我所看到的，你只是缺少一些属性来设置固定元素的位置。例如，在您的页脚中，您错过了属性权限：0，请按照您自己的示例：

＆＃13;

html, body {
    background-color: #ffffff;
    color: #ffffff;
    padding: 0;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.purple {
    color: #662d91;
}

.green {
    color: #22b24c;
}

.gray {
    color: #b3b2b2;
}

logo {
    background: white;
    color: black;
    border-radius: 1em;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.logo {
    max-width: 50%;
}

.text {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: xx-large;
    font-weight: bold;
    color: #b3b2b2;
    /* 
        Purple: #662d91
        Green: #22b24c
        Gray: #b3b2b2
    */
}

footer {
    background-color: #662d91;
    width: 100%;
    bottom: 0;
    position: fixed;
    padding: 4px;
    left: 0;
    font-size: x-small;
}

.copyright {
    display: inline;
}

.footerlinks {
    color: #ffffff;
    width: 100%;
    position: fixed;
    right:0;
    text-align: right;
    margin: 0;
    padding: 0;
    display: inline;
    max-width: 1470px;
}

a {
    padding-left: 4px;
    padding-right: 4px;
}

a:link {
    color: #ffffff;
}

a:visited {
    color: #ffffff;
}

a:hover {
    color: #b3b2b2;
}

a:active {
    color: #ffffff;
}

＆＃13;

<div>
        <logo><img class="logo" src="images/logo.png" alt="Holiday Lighting Logo" />
        <div class="text">Coming Soon!</div></logo>
    </div>
    <footer><div class="copyright">&copy;2016 Holiday Lighting, LLC</div>
    <div class="footerlinks"><a href="mailto:support@holiday.lighting">Contact Us</a>&bull;<a href="tos.html">Terms of Service</a>&bull;<a href="privacy.html">Privacy Policy</a></div></footer>

＆＃13;

带有静态页脚和左，中，右文本的HTML5 CSS居中图像

1 个答案: