Question

我创建了一个网页来学习Frontend网站开发。所有内容应居中，但我的容器之一根本不居中。这可能只是一个拼写错误，但我已经搜索了很长时间，而自己却找不到任何错误。那就是为什么我现在在这里寻求帮助。

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

只需让li在线显示：

function get_price_multiplier() {
    return 100; // 100 the multiplier
}

function get_price_discount() {
    return 11; // 11% discount
}  

add_filter('woocommerce_product_get_price', 'custom_price', 99, 2 );
add_filter('woocommerce_product_get_sale_price', 'custom_price', 99, 2 ); 
function custom_price( $price, $product ) { 
    global $woocommerce, $post, $wpdb; 

    $table_name = $wpdb->prefix . 'fancyplugin_wc_product_info'; 

    $result = ("SELECT * FROM {$table_name} WHERE pub_year >= '2016'"); 

    if( $result ) { 
        $price = $price - (get_price_discount() / get_price_multiplier() * $price); 
    } 
    return $price; 
}

我还通过将列表样式设置为无来删除了要点。

这是一个有效的示例： https://codepen.io/anon/pen/zQRWEJ

Answer 2

向该列表添加一个唯一的类，我添加了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>

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

2 个答案: