Question

我需要帮助将p元素放在flex页脚的中央（规则在769px媒体查询中）。我已经尝试了很多方法来使该元素居中。我已经用div元素将所有内容包装在页脚中，然后使p元素成为flex容器以沿主轴对齐，但这没有用。有人可以帮帮我吗？还有一个问题，为什么我的网页在这里运行时看起来不好？某些事物未居中，某些事物未对齐。

* {
  box-sizing: border-box;
  cursor: crosshair;
}

html {
  font-size: 16px;
}

a:link {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/***** STYLES ALL CONTAINERS HAVE ******/

h2,
h3 {
  text-align: center;
}

li .main-item {
  display: block;
  padding-bottom: 0.45rem;
}


/******* HEADER STYLES  *********/

.main-header {
  width: 100%;
  padding: 0.25rem;
}

.name {
  margin-bottom: 0.50rem;
  margin-top: 0.50rem;
}

.main-header .name,
.main-nav {
  text-align: center;
}

.main-item {
  text-transform: uppercase;
}


/********* MAIN SECTION STYLES  ***********/


/* BANNER STYLES */

.banner {
  width: 100%;
  background-color: #3acec2;
  color: #fff;
}

.logo {
  width: 6.25rem;
  height: 6.25rem;
  margin: 0 auto;
  display: block;
  padding-top: 0.25rem;
}

.headline,
.tagline {
  text-align: center;
}

.headline {
  margin-bottom: -0.50rem;
}

.tagline {
  padding-bottom: 0.25rem;
}


/* CONTAINER  */

.container {
  margin: 0 auto;
  width: 85%;
}


/********** FOOTER  ***************/

.nav,
.copyright,
.main-footer a {
  text-align: center;
}


/*********** MEDIA QUERIES  **********/

@media (min-width: 769px) {
  /******* HEADER STYLES  *********/
  .main-header {
    display: flex;
    flex-direction: column;
  }
  .main-nav {
    display: flex;
    justify-content: center;
  }
  .main-nav li {
    flex-grow: 0.10;
  }
  /*********  MAIN SECTION STYLES  ***********/
  /***** BANNER ******/
  .banner {
    height: 15rem;
    padding-top: 1.30rem;
  }
  .feat-img {
    height: 12.5rem;
    flex-basis: 31.25rem;
  }
  /***** CONTAINER OF COLUMNS *******/
  .container {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
  }
  .col {
    flex-grow: 0.75;
    flex-basis: 35%;
    justify-content: space-between;
  }
  .tertiary {
    order: -1;
    padding-left: 0.5rem;
  }
  .secondary {
    order: -2;
    ;
  }
  .primary {
    flex-grow: 3;
  }
  .feat-img {
    display: block;
    margin: 0 auto;
  }
  /********** FOOTER  ***************/
  .main-footer {
    display: flex;
    justify-content: center;
    background-color: red;
  }
  .nav {
    display: flex;
    flex-direction: column;
  }
  .footerc2 {
    order: 1;
  }
  .tyo {
    order: 1;
  }
}

@media all (min-width: 1025px) {}

<header class="main-header">
  <h1 class="name"><a href="#">Best City Guide</a></h1>
  <ul class="main-nav">
    <li><a class="main-item" href="#">ice cream</a></li>
    <li><a class="main-item" href="#">donuts</a></li>
    <li><a class="main-item" href="#">tea</a></li>
    <li><a class="main-item" href="#">coffee</a></li>
  </ul>
</header>
<!--/.main-header-->

<section class="banner  clearfix">
  <img class="logo" src="img/city-logo.svg" alt="City">
  <h1 class="headline">The Best City</h1>
  <p class="tagline">The best drinks and eats in the best city ever&period;</p>
</section>
<!--/.banner-->
<main>
  <!-- CONTAINER I CHOSE TO USE THE SECTION ELEMENT OVER THE DIV ELEMENT -->
  <section class="container">
    <article class="secondary col">
      <h2>Welcome&excl;</h2>
      <p>Everything in this city is worth waiting in line for&period;</p>
      <p>Cupcake ipsum dolor sit&period; Amet chocolate cake gummies jelly beans candy bonbon brownie candy&period; Gingerbread powder muffin&period; Icing cotton candy&period; Croissant icing pie ice cream brownie I love cheesecake cookie&period; Pastry
        chocolate pastry jelly croissant&period;</p>
      <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar&period; Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll&period; Tootsie roll wafer I love chocolate donuts&period;</p>
    </article>
    <!--/.secondary-->

    <article class="primary col">
      <h2>Great food</h2>
      <img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
      <p>Croissant macaroon pie brownie&period; Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate&period; Wafer lollipop dessert&period; Bonbon jelly beans pudding dessert sugar plum&period; Marzipan toffee drag&#233;e chocolate bar
        candy toffee pudding I love&period; Gummi bears pie gingerbread lollipop&period;</p>
    </article>
    <!--/.primary-->

    <article class="tertiary col">
      <h2>How to get here</h2>
      <p><strong>Plane&colon; </strong>Tiramisu caramels gummies chupa chups lollipop muffin&period; Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake&period;</p>
      <p><strong>Train&colon; </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops&period; Lollipop gummi bears dessert muffin I love fruitcake toffee pie&period;</p>
      <p><strong>Car&colon; </strong>Jelly cotton candy bonbon jelly&dash;o jelly&dash;o I love&period; I love sugar plum chocolate cake pie I love pastry liquorice&period;</p>
    </article>
    <!--/.tertiary-->
  </section>

</main>



<footer class="main-footer">
  <div class="footerc1">
    <h3>Company</h3>
    <ul class="nav">
      <li><a class="main-item" href="#">About Us</a></li>
      <li><a class="main-item" href="#">Careers</a></li>
      <li><a class="main-item" href="#">Investor Relations</a></li>
    </ul>
  </div>
  <div class="footerc2">
    <h3>Services</h3>
    <ul class="nav">
      <li><a class="main-item" href="#">My Account</a></li>
      <li class="tyo"><a class="main-item" href="#">Track Your Order</a></li>
      <li><a class="main-item" href="#">Credit Card</a></li>
      <li><a class="main-item" href="#">Gift Card</a></li>
    </ul>
  </div>
  <div class="footerc3">
    <h3>Shop</h3>
    <ul class="nav">
      <li><a class="main-item" href="#">Find a Store</a></li>
      <li><a class="main-item" href="#">Store Services</a></li>
      <li><a class="main-item" href="#">Weekly Ad</a></li>
    </ul>
  </div>
  <div class="footerc4">
    <h3>Resources</h3>
    <ul class="nav">
      <li><a class="main-item" href="#">Return Policy</a></li>
      <li><a class="main-item" href="#">Shipping Rates</a></li>
      <li><a class="main-item" href="#">Product Availability &amp; Price</a></li>
    </ul>
    <p class="copyright">&copy;2015 Residents of The Best City Ever.</p>
</footer>

Answer 1

如果我理解正确，则页脚“ li”元素应居中，参考号为“ h1 / h2 / h3”。我没有更改您的任何代码。

我只是添加了以下内容，并删除了相应的'ul'类。

ul { list-style-type：无；填充：0; 边距：0; }

 .footerc1 .footerc2 footerc3{
            text-align: center;
        }
        * {
            box-sizing: border-box;
            cursor: crosshair;
        }

        html {
            font-size: 16px;
        }

        a:link {
            text-decoration: none;
        }

        ul {
            list-style-type: none;
            padding: 0;
  margin: 0;
        }



        /***** STYLES ALL CONTAINERS HAVE ******/

        h2,
        h3 {
            text-align: center;
        }

        li .main-item {
            display: block;
            padding-bottom: 0.45rem;
        }

        /******* HEADER STYLES  *********/

        .main-header {
            width: 100%;
            padding: 0.25rem;
        }

        .name {
            margin-bottom: 0.50rem;
            margin-top: 0.50rem;
        }

        .main-header .name,
        .main-nav {
            text-align: center;
        }

        .main-item {
            text-transform: uppercase;
        }

        /********* MAIN SECTION STYLES  ***********/

        /* BANNER STYLES */

        .banner {
            width: 100%;
            background-color: #3acec2;
            color: #fff;
        }

        .logo {
            width: 6.25rem;
            height: 6.25rem;
            margin: 0 auto;
            display: block;
            padding-top: 0.25rem;
        }

        .headline,
        .tagline {
            text-align: center;
        }

        .headline {
            margin-bottom: -0.50rem;
        }

        .tagline {
            padding-bottom: 0.25rem;
        }

        /* CONTAINER  */

        .container {
            margin: 0 auto;
            width: 85%;
        }

        /********** FOOTER  ***************/

        .nav,
        .copyright,
        .main-footer a {
            text-align: center;
        }









        /*********** MEDIA QUERIES  **********/

        @media (min-width: 769px) {


            /******* HEADER STYLES  *********/
            .main-header {
                display: flex;
                flex-direction: column;
            }

            .main-nav {
                display: flex;
                justify-content: center;
            }

            .main-nav li {
                flex-grow: 0.10;
            }






            /*********  MAIN SECTION STYLES  ***********/
            /***** BANNER ******/
            .banner {
                height: 15rem;
                padding-top: 1.30rem;
            }

            .feat-img {
                height: 12.5rem;
                flex-basis: 31.25rem;
            }

            /***** CONTAINER OF COLUMNS *******/
            .container {
                display: flex;
                flex-wrap: wrap;
                width: 90%;
            }

            .col {
                flex-grow: 0.75;
                flex-basis: 35%;
                justify-content: space-between;
            }

            .tertiary {
                order: -1;
                padding-left: 0.5rem;
            }

            .secondary {
                order: -2;
                ;
            }

            .primary {
                flex-grow: 3;
            }

            .feat-img {
                display: block;
                margin: 0 auto;
            }

            /********** FOOTER  ***************/
            .main-footer {
                display: flex;
                justify-content: center;
                background-color: red;

            }

            .nav {
                display: flex;
                flex-direction: column;
            }

            .footerc2 {
                order: 1;
            }

            .tyo {
                order: 1;
            }



        }

        @media all (min-width: 1025px) {}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best City Guide</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <header class="main-header">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <ul class="main-nav">
            <li><a class="main-item" href="#">ice cream</a></li>
            <li><a class="main-item" href="#">donuts</a></li>
            <li><a class="main-item" href="#">tea</a></li>
            <li><a class="main-item" href="#">coffee</a></li>
        </ul>
    </header>
    <!--/.main-header-->

    <section class="banner  clearfix">
        <img class="logo" src="img/city-logo.svg" alt="City">
        <h1 class="headline">The Best City</h1>
        <p class="tagline">The best drinks and eats in the best city ever&period;</p>
    </section>
    <!--/.banner-->
    <main>
        <!-- CONTAINER I CHOSE TO USE THE SECTION ELEMENT OVER THE DIV ELEMENT -->
        <section class="container">
            <article class="secondary col">
                <h2>Welcome&excl;</h2>
                <p>Everything in this city is worth waiting in line for&period;</p>
                <p>Cupcake ipsum dolor sit&period; Amet chocolate cake gummies jelly beans candy bonbon brownie candy&period; Gingerbread powder muffin&period; Icing cotton candy&period; Croissant icing pie ice cream brownie I love cheesecake cookie&period; Pastry chocolate pastry jelly croissant&period;</p>
                <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar&period; Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll&period; Tootsie roll wafer I love chocolate donuts&period;</p>
            </article>
            <!--/.secondary-->

            <article class="primary col">
                <h2>Great food</h2>
                <img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
                <p>Croissant macaroon pie brownie&period; Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate&period; Wafer lollipop dessert&period; Bonbon jelly beans pudding dessert sugar plum&period; Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love&period; Gummi bears pie gingerbread lollipop&period;</p>
            </article>
            <!--/.primary-->

            <article class="tertiary col">
                <h2>How to get here</h2>
                <p><strong>Plane&colon; </strong>Tiramisu caramels gummies chupa chups lollipop muffin&period; Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake&period;</p>
                <p><strong>Train&colon; </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops&period; Lollipop gummi bears dessert muffin I love fruitcake toffee pie&period;</p>
                <p><strong>Car&colon; </strong>Jelly cotton candy bonbon jelly&dash;o jelly&dash;o I love&period; I love sugar plum chocolate cake pie I love pastry liquorice&period;</p>
            </article>
            <!--/.tertiary-->
        </section>

    </main>



    <footer class="main-footer">
        <div class="footerc1">
            <h3>Company</h3>
            <ul class="">
                <li><a class="main-item" href="#">About Us</a></li>
                <li><a class="main-item" href="#">Careers</a></li>
                <li><a class="main-item" href="#">Investor Relations</a></li>
            </ul>
        </div>
        <div class="footerc2">
            <h3>Services</h3>
            <ul class="">
                <li><a class="main-item" href="#">My Account</a></li>
                <li class="tyo"><a class="main-item" href="#">Track Your Order</a></li>
                <li><a class="main-item" href="#">Credit Card</a></li>
                <li><a class="main-item" href="#">Gift Card</a></li>
            </ul>
        </div>
        <div class="footerc3">
            <h3>Shop</h3>
            <ul class="">
                <li><a class="main-item" href="#">Find a Store</a></li>
                <li><a class="main-item" href="#">Store Services</a></li>
                <li><a class="main-item" href="#">Weekly Ad</a></li>
            </ul>
        </div>
        <div class="footerc4">
            <h3>Resources</h3>
            <ul class="">
                <li><a class="main-item" href="#">Return Policy</a></li>
                <li><a class="main-item" href="#">Shipping Rates</a></li>
                <li><a class="main-item" href="#">Product Availability &amp; Price</a></li>
            </ul>

        </div>

    </footer>
    <p class="copyright">&copy;2015 Residents of The Best City Ever.</p>
    

</body>
</html>

Answer 2

您缺少页脚中的最后一个div结束标记。我建议将页脚的内容包装在div中，以使p标签始终居中。

ul标签带有填充，因此您需要设置padding: 0才能使其居中。

您可以在下面的代码段中看到更改：

* {
  box-sizing: border-box;
  cursor: crosshair;
}

html {
  font-size: 16px;
}

a:link {
  text-decoration: none;
}

ul {
  padding: 0;
  list-style-type: none;
}


/***** STYLES ALL CONTAINERS HAVE ******/

h2,
h3 {
  text-align: center;
}

li .main-item {
  display: block;
  padding-bottom: 0.45rem;
}


/******* HEADER STYLES  *********/

.main-header {
  width: 100%;
  padding: 0.25rem;
}

.name {
  margin-bottom: 0.50rem;
  margin-top: 0.50rem;
}

.main-header .name,
.main-nav {
  text-align: center;
}

.main-item {
  text-transform: uppercase;
}


/********* MAIN SECTION STYLES  ***********/


/* BANNER STYLES */

.banner {
  width: 100%;
  background-color: #3acec2;
  color: #fff;
}

.logo {
  width: 6.25rem;
  height: 6.25rem;
  margin: 0 auto;
  display: block;
  padding-top: 0.25rem;
}

.headline,
.tagline {
  text-align: center;
}

.headline {
  margin-bottom: -0.50rem;
}

.tagline {
  padding-bottom: 0.25rem;
}


/* CONTAINER  */

.container {
  margin: 0 auto;
  width: 85%;
}


/********** FOOTER  ***************/

.nav,
.copyright,
.main-footer a {
  text-align: center;
}


/*********** MEDIA QUERIES  **********/

@media (min-width: 769px) {
  /******* HEADER STYLES  *********/
  .main-header {
    display: flex;
    flex-direction: column;
  }
  .main-nav {
    display: flex;
    justify-content: center;
  }
  .main-nav li {
    flex-grow: 0.10;
  }
  /*********  MAIN SECTION STYLES  ***********/
  /***** BANNER ******/
  .banner {
    height: 15rem;
    padding-top: 1.30rem;
  }
  .feat-img {
    height: 12.5rem;
    flex-basis: 31.25rem;
  }
  /***** CONTAINER OF COLUMNS *******/
  .container {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
  }
  .col {
    flex-grow: 0.75;
    flex-basis: 35%;
    justify-content: space-between;
  }
  .tertiary {
    order: -1;
    padding-left: 0.5rem;
  }
  .secondary {
    order: -2;
    ;
  }
  .primary {
    flex-grow: 3;
  }
  .feat-img {
    display: block;
    margin: 0 auto;
  }
  /********** FOOTER  ***************/
  .main-footer {
    background-color: red;
  }
  .footer-content {
    display: flex;
    justify-content: center;
  }
  .nav {
    display: flex;
    flex-direction: column;
  }
  .footerc2 {
    order: 1;
  }
  .tyo {
    order: 1;
  }
}

@media all (min-width: 1025px) {}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Best City Guide</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <header class="main-header">
    <h1 class="name"><a href="#">Best City Guide</a></h1>
    <ul class="main-nav">
      <li><a class="main-item" href="#">ice cream</a></li>
      <li><a class="main-item" href="#">donuts</a></li>
      <li><a class="main-item" href="#">tea</a></li>
      <li><a class="main-item" href="#">coffee</a></li>
    </ul>
  </header>
  <!--/.main-header-->

  <section class="banner  clearfix">
    <img class="logo" src="img/city-logo.svg" alt="City">
    <h1 class="headline">The Best City</h1>
    <p class="tagline">The best drinks and eats in the best city ever&period;</p>
  </section>
  <!--/.banner-->
  <main>
    <!-- CONTAINER I CHOSE TO USE THE SECTION ELEMENT OVER THE DIV ELEMENT -->
    <section class="container">
      <article class="secondary col">
        <h2>Welcome&excl;</h2>
        <p>Everything in this city is worth waiting in line for&period;</p>
        <p>Cupcake ipsum dolor sit&period; Amet chocolate cake gummies jelly beans candy bonbon brownie candy&period; Gingerbread powder muffin&period; Icing cotton candy&period; Croissant icing pie ice cream brownie I love cheesecake cookie&period; Pastry
          chocolate pastry jelly croissant&period;</p>
        <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar&period; Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll&period; Tootsie roll wafer I love chocolate donuts&period;</p>
      </article>
      <!--/.secondary-->

      <article class="primary col">
        <h2>Great food</h2>
        <img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
        <p>Croissant macaroon pie brownie&period; Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate&period; Wafer lollipop dessert&period; Bonbon jelly beans pudding dessert sugar plum&period; Marzipan toffee drag&#233;e chocolate
          bar candy toffee pudding I love&period; Gummi bears pie gingerbread lollipop&period;</p>
      </article>
      <!--/.primary-->

      <article class="tertiary col">
        <h2>How to get here</h2>
        <p><strong>Plane&colon; </strong>Tiramisu caramels gummies chupa chups lollipop muffin&period; Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake&period;</p>
        <p><strong>Train&colon; </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops&period; Lollipop gummi bears dessert muffin I love fruitcake toffee pie&period;</p>
        <p><strong>Car&colon; </strong>Jelly cotton candy bonbon jelly&dash;o jelly&dash;o I love&period; I love sugar plum chocolate cake pie I love pastry liquorice&period;</p>
      </article>
      <!--/.tertiary-->
    </section>

  </main>



  <footer class="main-footer">
    <div class="footer-content">
      <div class="footerc1">
        <h3>Company</h3>
        <ul class="nav">
          <li><a class="main-item" href="#">About Us</a></li>
          <li><a class="main-item" href="#">Careers</a></li>
          <li><a class="main-item" href="#">Investor Relations</a></li>
        </ul>
      </div>
      <div class="footerc2">
        <h3>Services</h3>
        <ul class="nav">
          <li><a class="main-item" href="#">My Account</a></li>
          <li class="tyo"><a class="main-item" href="#">Track Your Order</a></li>
          <li><a class="main-item" href="#">Credit Card</a></li>
          <li><a class="main-item" href="#">Gift Card</a></li>
        </ul>
      </div>
      <div class="footerc3">
        <h3>Shop</h3>
        <ul class="nav">
          <li><a class="main-item" href="#">Find a Store</a></li>
          <li><a class="main-item" href="#">Store Services</a></li>
          <li><a class="main-item" href="#">Weekly Ad</a></li>
        </ul>
      </div>
      <div class="footerc4">
        <h3>Resources</h3>
        <ul class="nav">
          <li><a class="main-item" href="#">Return Policy</a></li>
          <li><a class="main-item" href="#">Shipping Rates</a></li>
          <li><a class="main-item" href="#">Product Availability &amp; Price</a></li>
        </ul>
      </div>
    </div>
    <p class="copyright">&copy;2015 Residents of The Best City Ever.</p>
  </footer>


</body>

</html>

如何将容器中的最后一个伸缩项目居中？

2 个答案: