为什么我的一个容器没有居中？

Question

我创建了一个网页来学习前端 Web 开发。所有内容都应该居中，但我的一个容器根本不居中。这可能只是一个拼写错误，但我已经搜索了很长时间，自己也找不到代码有什么问题。这就是我现在在这里寻求帮助的原因。

body {
    margin: 0;
    font-family: sans-serif;
}

p, blockquote {
    font-size: 0.9em;
    line-height: 1.6em;

    
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.container {
    text-align: center;
    padding: 0.8em;
}

.logo {
    width: 130px;
}

.hide-mobile {
    display: none;
}

header {
    display: flex;
    justify-content: space-between;
}

.menu {
    width: 25px;
    margin-top: 45%;
}

.server {
    width: 70%;
    margin: 2em auto 2em 25%;
}

h1, .subhead {
    position: relative;
    z-index: 3;
}

.subhead {
    font-size: 1.1em;
}

.blue-container {
    width: 100%;
    background: #00C2FF;
    color: white;
    margin-top: 15%;
    padding: 4em 0 2em;
    border-top-left-radius: 40px;
    transform: skewY(-2deg);
}

.blue-container:before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #00C2FF;
    position: absolute;
    top: -39px;
    right: 0;
    z-index: -2;

}

.blue-container:after {
    content: "";
    width: 80px;
    height: 80px;
    background-color: white;
    position: absolute;
    top: -80px;
    right: 0;
    border-radius: 50%;
    z-index: -1;
}

.blue-container ul {
    transform: skewY(2deg);
}

.blue-container ul li {
    margin-bottom: 3em;
}

.blue-container ul li p {
    padding: 0 0.5em;
}

.blue-container img {
    width: 14%;
}

.blue-container ul li:nth-child(3) img{
    width: 10%;
}

.grey-container {
    background: #F6F6F6;
    padding: 4em 0 2em;
    margin-top: -3%;
}

.grey-container ul li:first-child {
    margin-bottom: 2em;
}

figure {
    margin: 0;
    padding: 0;
}

figcaption {
    font-weight: bold;
    color: #00C2FF;
}

h2 {
    margin-top: 7%;
}

.cta {
    background: #00cc80;
    width: calc(100% - 1em);
    display: block;
    color: white;
    border-radius: 20px;
    padding: .5em;
    text-decoration: none;
    font-size: 1.5em;
    margin: 3% auto 7%;
    position: relative;
    z-index: 4;
}

.footer-container {
    width: 100%;
    background: #3D444A;
    color: #fff;
    padding: 3em 0;
    border-top-right-radius: 40px;
    transform: skewY(2deg);
}

.footer-container .container {
    transform: skewY(-2deg);
}

.footer-container:before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #3D444A;
    position: absolute;
    top: -39px;
    left: 0;
    z-index: -2;
}

.footer-container:after {
    content: "";
    width: 80px;
    height: 80px;
    background-color: #FFF;
    position: absolute;
    top: -80px;
    left: 0;
    z-index: -1;
    border-radius: 50%;
}

.footer-links {
    margin: 0 auto;
}

.footer-links li {
    display: inline-block;
}

.footer-links li a{
    color: #9d9d9d;
    font-size: .8em;
}

nav ul {
    position: fixed;
    width: 60%;
    top: 0;
    right: 0;
    text-align: left;
    background: rgb(36, 41, 44);
    height: 100%;
    z-index: 7;
    padding-top: 3em;
}

nav ul li a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 1em 2em
}

nav ul li a:hover {
    background-color: rgb(65, 72, 78)
}

.exit-btn {
    margin-bottom: 1em;
    margin-top: -1.3em;
    text-align: right;
    padding-right: 1.4em;
}

.exit-btn img {
    width: 15px;
    cursor: pointer;
}

@media only screen and (min-width: 650px) {

    .server {
        width: 50%;
    }

    h1 {
        font-size: 3em;
        margin: 0;
    }

    .subhead {
        font-size: 1.4em;
        margin-bottom: 12%;
    }

    .blue-container {
        margin: 0;
    }

    .blue-container img {
        width: 20%;
    }

    .blue-container ul li:nth-child(3) img{
        width: 11%;
        margin-top: -6px;
    }

    .blue-container ul {
        display: flex;
        margin-top: -1em;
        align-items: center;
    }

    .blue-container ul li {
        margin-bottom: 0;
    }

    .blue-container ul li p {
        padding: 0 .8em;
    }

    .grey-container ul {
        display: flex;
    }

    nav ul {
        width: 40%;
    }

    .cta {
        width: 80%;
    }
}

@media only screen and (min-width: 875px) {

    .subhead {
        margin-bottom: 15%;
    }

    .blue-container {
        padding-top: 1em;
    }

    .blue-container ul {
        margin: 0 0 4% 0;
    }

    .blue-container ul {
        margin: 4% 0 0 0;
    }

    .cta {
        width: 65%;
    }
}

@media only screen and (min-width: 1024px) {

    .blue-container {
        margin-top: 6em;
    }

    .cta {
        width: 50%;
    }

    .container {
        width: 80%;
        margin: 0 auto;
    }

    .show-desktop {
        display: block;
        margin: 0 auto;
    }

    .hide-desktop {
        display: none;
    }

    nav ul {
        position: inherit;
        width: auto;
        background: none;
        height: auto;
        display: flex;
        padding-top: 0;
    }

    nav ul li {
        float: left;
    }

    nav ul li a {
        color: black;
        text-align: right;
        padding: 1em 2em;
        background-color: inherit;
    }

    nav ul li a:hover {
        background-color: inherit;
    }

    .scroll {
        width: 30px;
        animation: move 1s infinite alternate;
        margin-top: -8em;
    }

    @keyframes move {
        0% {
            transform: translateY(35px);
        }
        100% {
            transform: translateY(50px);
        }
    }
}

@media only screen and (min-width: 1600px) {

    .server{
        width: 40%;
        margin: 5em auto 4em 15%;
    }

    .container{
        width: 70%
    }

    .blue-container {
        padding: 1em 0 2em;
    }

    .blue-container ul li p, blockquote {
        font-size: 1.3em;
    }

    .grey-container{
        padding: 6em 0 4em;
    }

    h2 {
        margin-top: 4em;
    }

    .blue-container img {
        width: 15%;
    }

    .blue-container ul li:nth-child(3) img {
        width: 8%;
        margin-top: -4px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Frontend</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <header>
            <img src="images/logo.svg" alt="Logo" class="Logo">

            <nav>
                <a href="#" class="hide-desktop">
                    <img src="images/ham.svg" alt="toggle menu" class="menu" id="menu">
                </a>

                <ul class="show-desktop hide-mobile" id="nav">
                    <li class="exit-btn hide-desktop" id="exit"><img src="images/exit.svg" alt="exit"></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        <section>
            <img src="images/server.svg" alt="server" class="server">

            <h1>Web Hosting for the modern Era</h1>
            <p class="subhead">Go Serverless and pay only for what you use.</p>

            <img src="images/scroll.svg" alt="scroll down" class="scroll hide-mobile show-desktop">
        </section>
    </div>

    <div class="blue-container">
        <div class="container">
            <ul>
                <li>
                    <img src="images/icon-1.svg" alt="img1">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
                <li>
                        <img src="images/icon-2.svg" alt="img1">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
                <li>
                        <img src="images/icon-3.svg" alt="img1">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="grey-container">
        <div class="container">
            <ul>
                <li>
                    <figure>
                        <img src="images/user1.png" alt="user1">
                        <blockquote>I've never seen anything alike this!</blockquote>
                        <figcaption>- Jane Doe</figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/user2.png" alt="user2">
                        <blockquote>Its just great! Such an amazing product.</blockquote>
                        <figcaption>- Max Harvard</figcaption>
                    </figure>
                </li>
            </ul>
        </div>
    </div>

    <div class="container">
        <h2>Start your free trial now!</h2>
        <a href="#" class="cta">Get Started</a>
    </div>

    <footer>
        <div class="footer-container">
            <div class="container">
                <a href="#">
                    <img src="images/logo-white.svg" alt="logowhite" class="logo">
                </a>
                <p class="address">Melrose Place, 90210<br>USA</p>
                <ul class="footer-links">
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Privacy Polacy</a></li>
                </ul>
            </div>
        </div>
    </footer>

    <script>

        var menu = document.getElementById('menu');
        var nav = document.getElementById('nav');
        var exit = document.getElementById('exit');

        menu.addEventListener('click', function(e){
            nav.classList.toggle('hide-mobile')
            e.preventDefault();
        })

        exit.addEventListener('click', function(e){
            nav.classList.toggle('hide-mobile')
            e.preventDefault();
        })

    </script>
</body>
</html>

Image of how its looking right now

如您所见，它偏离中心，我的目标也是使其居中。

感谢您提前提供帮助:)

Answer 1

向该列表添加一个独特的类，我添加了user-list。然后你可以将 flexbox 布局应用到那个部分：

.user-list {
  display: flex;
  justify-content: center;
}
.user-list li {
  flex: 0 0 auto; /* dont grow, dont shrink, width auto based on content */
}

justify-content: center 规则使项目居中。

body {
    margin: 0;
    font-family: sans-serif;
}

p, blockquote {
    font-size: 0.9em;
    line-height: 1.6em;

    
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.container {
    text-align: center;
    padding: 0.8em;
}

.logo {
    width: 130px;
}

.hide-mobile {
    display: none;
}

header {
    display: flex;
    justify-content: space-between;
}

.menu {
    width: 25px;
    margin-top: 45%;
}

.server {
    width: 70%;
    margin: 2em auto 2em 25%;
}

h1, .subhead {
    position: relative;
    z-index: 3;
}

.subhead {
    font-size: 1.1em;
}

.blue-container {
    width: 100%;
    background: #00C2FF;
    color: white;
    margin-top: 15%;
    padding: 4em 0 2em;
    border-top-left-radius: 40px;
    transform: skewY(-2deg);
}

.blue-container:before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #00C2FF;
    position: absolute;
    top: -39px;
    right: 0;
    z-index: -2;

}

.blue-container:after {
    content: "";
    width: 80px;
    height: 80px;
    background-color: white;
    position: absolute;
    top: -80px;
    right: 0;
    border-radius: 50%;
    z-index: -1;
}

.blue-container ul {
    transform: skewY(2deg);
}

.blue-container ul li {
    margin-bottom: 3em;
}

.blue-container ul li p {
    padding: 0 0.5em;
}

.blue-container img {
    width: 14%;
}

.blue-container ul li:nth-child(3) img{
    width: 10%;
}

.grey-container {
    background: #F6F6F6;
    padding: 4em 0 2em;
    margin-top: -3%;
}

.grey-container ul li:first-child {
    margin-bottom: 2em;
}

figure {
    margin: 0;
    padding: 0;
}

figcaption {
    font-weight: bold;
    color: #00C2FF;
}

h2 {
    margin-top: 7%;
}

.cta {
    background: #00cc80;
    width: calc(100% - 1em);
    display: block;
    color: white;
    border-radius: 20px;
    padding: .5em;
    text-decoration: none;
    font-size: 1.5em;
    margin: 3% auto 7%;
    position: relative;
    z-index: 4;
}

.footer-container {
    width: 100%;
    background: #3D444A;
    color: #fff;
    padding: 3em 0;
    border-top-right-radius: 40px;
    transform: skewY(2deg);
}

.footer-container .container {
    transform: skewY(-2deg);
}

.footer-container:before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #3D444A;
    position: absolute;
    top: -39px;
    left: 0;
    z-index: -2;
}

.footer-container:after {
    content: "";
    width: 80px;
    height: 80px;
    background-color: #FFF;
    position: absolute;
    top: -80px;
    left: 0;
    z-index: -1;
    border-radius: 50%;
}

.footer-links {
    margin: 0 auto;
}

.footer-links li {
    display: inline-block;
}

.footer-links li a{
    color: #9d9d9d;
    font-size: .8em;
}

nav ul {
    position: fixed;
    width: 60%;
    top: 0;
    right: 0;
    text-align: left;
    background: rgb(36, 41, 44);
    height: 100%;
    z-index: 7;
    padding-top: 3em;
}

nav ul li a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 1em 2em
}

nav ul li a:hover {
    background-color: rgb(65, 72, 78)
}

.exit-btn {
    margin-bottom: 1em;
    margin-top: -1.3em;
    text-align: right;
    padding-right: 1.4em;
}

.exit-btn img {
    width: 15px;
    cursor: pointer;
}

.user-list {
  display: flex;
  justify-content: center;
}
.user-list li {
  flex: 0 0 auto; /* dont grow, dont shrink, width auto based on content */
}

@media only screen and (min-width: 650px) {

    .server {
        width: 50%;
    }

    h1 {
        font-size: 3em;
        margin: 0;
    }

    .subhead {
        font-size: 1.4em;
        margin-bottom: 12%;
    }

    .blue-container {
        margin: 0;
    }

    .blue-container img {
        width: 20%;
    }

    .blue-container ul li:nth-child(3) img{
        width: 11%;
        margin-top: -6px;
    }

    .blue-container ul {
        display: flex;
        margin-top: -1em;
        align-items: center;
    }

    .blue-container ul li {
        margin-bottom: 0;
    }

    .blue-container ul li p {
        padding: 0 .8em;
    }

    .grey-container ul {
        display: flex;
    }

    nav ul {
        width: 40%;
    }

    .cta {
        width: 80%;
    }
}

@media only screen and (min-width: 875px) {

    .subhead {
        margin-bottom: 15%;
    }

    .blue-container {
        padding-top: 1em;
    }

    .blue-container ul {
        margin: 0 0 4% 0;
    }

    .blue-container ul {
        margin: 4% 0 0 0;
    }

    .cta {
        width: 65%;
    }
}

@media only screen and (min-width: 1024px) {

    .blue-container {
        margin-top: 6em;
    }

    .cta {
        width: 50%;
    }

    .container {
        width: 80%;
        margin: 0 auto;
    }

    .show-desktop {
        display: block;
        margin: 0 auto;
    }

    .hide-desktop {
        display: none;
    }

    nav ul {
        position: inherit;
        width: auto;
        background: none;
        height: auto;
        display: flex;
        padding-top: 0;
    }

    nav ul li {
        float: left;
    }

    nav ul li a {
        color: black;
        text-align: right;
        padding: 1em 2em;
        background-color: inherit;
    }

    nav ul li a:hover {
        background-color: inherit;
    }

    .scroll {
        width: 30px;
        animation: move 1s infinite alternate;
        margin-top: -8em;
    }

    @keyframes move {
        0% {
            transform: translateY(35px);
        }
        100% {
            transform: translateY(50px);
        }
    }
}

@media only screen and (min-width: 1600px) {

    .server{
        width: 40%;
        margin: 5em auto 4em 15%;
    }

    .container{
        width: 70%
    }

    .blue-container {
        padding: 1em 0 2em;
    }

    .blue-container ul li p, blockquote {
        font-size: 1.3em;
    }

    .grey-container{
        padding: 6em 0 4em;
    }

    h2 {
        margin-top: 4em;
    }

    .blue-container img {
        width: 15%;
    }

    .blue-container ul li:nth-child(3) img {
        width: 8%;
        margin-top: -4px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Frontend</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <header>
            <img src="images/logo.svg" alt="Logo" class="Logo">

            <nav>
                <a href="#" class="hide-desktop">
                    <img src="images/ham.svg" alt="toggle menu" class="menu" id="menu">
                </a>

                <ul class="show-desktop hide-mobile" id="nav">
                    <li class="exit-btn hide-desktop" id="exit"><img src="images/exit.svg" alt="exit"></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        <section>
            <img src="images/server.svg" alt="server" class="server">

            <h1>Web Hosting for the modern Era</h1>
            <p class="subhead">Go Serverless and pay only for what you use.</p>

            <img src="images/scroll.svg" alt="scroll down" class="scroll hide-mobile show-desktop">
        </section>
    </div>

    <div class="blue-container">
        <div class="container">
            <ul>
                <li>
                    <img src="images/icon-1.svg" alt="img1">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
                <li>
                        <img src="images/icon-2.svg" alt="img1">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
                <li>
                        <img src="images/icon-3.svg" alt="img1">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="grey-container">
        <div class="container">
            <ul class="user-list">
                <li>
                    <figure>
                        <img src="images/user1.png" alt="user1">
                        <blockquote>I've never seen anything alike this!</blockquote>
                        <figcaption>- Jane Doe</figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/user2.png" alt="user2">
                        <blockquote>Its just great! Such an amazing product.</blockquote>
                        <figcaption>- Max Harvard</figcaption>
                    </figure>
                </li>
            </ul>
        </div>
    </div>

    <div class="container">
        <h2>Start your free trial now!</h2>
        <a href="#" class="cta">Get Started</a>
    </div>

    <footer>
        <div class="footer-container">
            <div class="container">
                <a href="#">
                    <img src="images/logo-white.svg" alt="logowhite" class="logo">
                </a>
                <p class="address">Melrose Place, 90210<br>USA</p>
                <ul class="footer-links">
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Privacy Polacy</a></li>
                </ul>
            </div>
        </div>
    </footer>

    <script>

        var menu = document.getElementById('menu');
        var nav = document.getElementById('nav');
        var exit = document.getElementById('exit');

        menu.addEventListener('click', function(e){
            nav.classList.toggle('hide-mobile')
            e.preventDefault();
        })

        exit.addEventListener('click', function(e){
            nav.classList.toggle('hide-mobile')
            e.preventDefault();
        })

    </script>
</body>
</html>

Answer 2

只要让你的 li 显示内联：

li {
  display: inline-block;
}

ul {
  list-style: none;
}

我还通过将 list-style 设置为 none 来删除项目符号。

这是一个工作示例： https://codepen.io/anon/pen/zQRWEJ