如何使我的三列布局居中？

Question

所以当视口大于 1200 像素时，我试图让我的三列布局居中，但我无法让它工作。

非常感谢您的帮助！

这是我的代码（我只包括主要 css 和主要 html 文件）：

/*****UNIVERSAL SELECTORS*****/
body {
 margin: 0;
 padding: 0;
 background: linear-gradient(
    rgba(15,36,0,.5),
    rgba(15,36,0,.5)
    ),
    url(img/background.jpg) no-repeat center;
}
ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
a {
 text-decoration: none;
 color: inherit;
}

/*****HEADER SELECTORS*****/
header a img {
 width: 100px;
 margin: 10px;
}
header nav {
 display: inline-block;
 float: right;
}
header nav ul {
 margin-top: 30px;
 z-index: 100;
}
header nav ul li {
 display: inline;
 padding: 15px;
 color: #b3de81;
 font-family: 'Lato', sans-serif;
}
header nav ul li a {
 padding: 15px;
}
#menu-icon {
 margin-top: 30%;
 height: 40px;
 width: 40px;
 display: hidden;
 background: url(img/hamburger.png);
}
#menu-icon:hover {
 border-radius: 20%;
}
/********** SLIDER **********/
.slider {
  max-width: 940px;
  margin: 0px auto 30px auto;}

.slide-viewer {
    position: relative; /* needed for IE7 */
    overflow: hidden;
    height: 430px;
 padding: 5px;
 }

.slide-group {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    box-shadow: inset 5px 5px 100px black,
    inset -5px -5px 100px black;
}
.slide-1 {
 background: url(img/slide-1.jpg);
 background-size: cover;
}
.slide-2 {
 background: url(img/slide-2.jpg);
 background-size: cover;
}
.slide-3 {
 background: url(img/slide-3.jpg);
 background-size: cover;
}
.slide-4 {
 background: url(img/slide-4.jpg);
 background-size: cover;
}
.slide:first-child {
    display: block;
}
/********** BUTTONS **********/
.slide-buttons {
  text-align: center;}

.slide-btn {
  border: none;
  background: none;
  color: #000;
  font-size: 200%;
  line-height: 0.5em;}

.slide-btn.active, .slide-btn:hover {
  color: #ed8e6c;
  cursor: pointer;}
/*****BODY*****/

section:nth-of-type(1) {
 background-color: #fdffff;
}
h1:nth-of-type(1) {
 background-color: #fdffff;
 margin: 0;
 text-align: center;
 padding: 30px;
 font-family: 'Lato', sans-serif;
 color: #004040;
}
.bwrapper {
 width: 70%;
 margin: 50px auto 50px auto;
 background-color: #fdffff;
 font-family: 'Lato', sans-serif;
 box-shadow: .1px .1px 2px #b3de81,
    -.1px -.1px 2px #b3de81;

}
.hwrapper {
 width: 100%;
}
.twrapper {
 width: 100%;
 margin: auto;
 text-align: center;
}
.col {
 margin: 5%;
}

/*****MEDIA QUERIES*****/
@media only screen and (min-width: 1200px) {
 .twrapper {
  overflow: auto;
  margin: 0;
  position: relative;
 }
 .col {
  float: left;
  width: 250px;
  margin: 0;
 }
}
@media only screen and (max-width: 930px) {
 header nav ul {
  display: none;
 }
 #menu-icon {
  display: inline-block;
 }
 nav ul,
 nav ul:active { 
  position: absolute;
  padding: 40px;
  background-color: #fdffff;
  right: 10px;
  width: 50%;
  border: solid 1px #265c00;
  box-shadow: 1px 1px 5px black,
     -1px -1px 5px black;
 }

 nav li {
  text-align: center;
  width: 100%;
  padding: 10px 0;
  margin: 0;
 }
 nav {
  padding: 10px;
 }
 nav:hover ul {
  display: block;
  margin: 0px;
 }
}
@media only screen and (max-width: 435px) {
 .bwrapper {
  width: 100%;
  margin: auto;
 }
 header {
  box-shadow: inset 2px 2px 5px black,
     inset -2px -2px 5px black;

 }
}

<!DOCTYPE html>
 <html lang="en">
  <head>
   <meta name="robots" content="index, follow">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="utf-8">
   <title>Wylde Snack Foods | A Dedicated Gluten-Free Facility and A Subsidiary Company of Ener-G Foods Inc.</title>
   <meta name="Description" content="A dedicated gluten-free facility open to private-label business.">
     <meta name="Keywords" content="wylde snack foods, ener-g foods inc">
     <link rel="stylesheet" type="text/css" href="normalize.css">
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="hover.css">
   <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
   <div class="hwrapper">
   <header>
    <a href="#"><img src="img/logo02.png" alt="Wylde Snack Foods logo" class="hvr-buzz"></a>
    <nav>
     <a href="#" id="menu-icon"></a>
     <ul>     
      <li class="hvr-bob"><a href="index.html">Home</a></li>      
      <li class="hvr-bob"><a href="products/products.html">Products</a></li> 
      <li class="hvr-bob"><a href="contract_mfg/contract_mfg.html">Contract MFG</a></li>      
      <li class="hvr-bob"><a href="about/about.html">About</a></li>
      <li class="hvr-bob"><a href="contact/contact.html">Contact</a></li> 
      <li class="hvr-bob"><a href="http://www.ener-g.com/" target="_blank">Ener-G Foods</a></li>
     </ul>
    </nav>
   </header>
   </div>

   <div class="bwrapper">
    <h1>Some of Our Products</h1>
    <section>

      <div class="slider">
        <div class="slide-viewer">
          <div class="slide-group">
            <div class="slide slide-1">
            </div>
            <div class="slide slide-2">
            </div>
            <div class="slide slide-3">
            </div>
            <div class="slide slide-4">
            </div>
          </div>
        </div>
        <div class="slide-buttons"></div>
      </div>

    </section>

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/slider.js"></script>

   <div class="twrapper">
   <div class="alignwrap">
    <div class="col left">
     <h3>Our Products</h3>
     <p>
      We are a dedicated gluten-free facility which makes a variety of products. Additionally, we avoid the top allergens listed by FALCPA. Click <a href="products/products.html">here</a> to be redirected to our products page.
     </p>
    </div>

    <div class="col center">
     <h3>Our Clients</h3>
      We are currently open to private-label business; however, other business inquiries may be accepted. Click <a href="">here </a> to be redirected to our Contract MFG.
     </div>

    <div class="col right">
     <h3>Our Certification</h3>
      We are SQF certified with some of our products being certified as organic. Click <a href="certification/certification.html">here</a> to be redirected to our certifications.
     </div>
     </div>
    </div>

   
   <footer>
    <ul>
     <li><a href="certification/certification.html">Certification</a></li>
    </ul>
    <span>&copy;Wylde Snack Foods</span>
   </footer>
   </div>

  </body>
 </html>

Answer 1

将 .trwrapper 设为弹性框并 justify-content:center;。

当屏幕宽度大于 1200px 时 .trwrapper 的 CSS 应该是：

.twrapper {
  overflow: auto;
  margin: 0;
  position: relative;
  display: flex;
  justify-content: center;
}

工作代码段

/*****UNIVERSAL SELECTORS*****/

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(rgba(15, 36, 0, .5), rgba(15, 36, 0, .5)), url(img/background.jpg) no-repeat center;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
/*****HEADER SELECTORS*****/

header a img {
  width: 100px;
  margin: 10px;
}
header nav {
  display: inline-block;
  float: right;
}
header nav ul {
  margin-top: 30px;
  z-index: 100;
}
header nav ul li {
  display: inline;
  padding: 15px;
  color: #b3de81;
  font-family: 'Lato', sans-serif;
}
header nav ul li a {
  padding: 15px;
}
#menu-icon {
  margin-top: 30%;
  height: 40px;
  width: 40px;
  display: hidden;
  background: url(img/hamburger.png);
}
#menu-icon:hover {
  border-radius: 20%;
}
/********** SLIDER **********/

.slider {
  max-width: 940px;
  margin: 0px auto 30px auto;
}
.slide-viewer {
  position: relative;
  /* needed for IE7 */
  overflow: hidden;
  height: 430px;
  padding: 5px;
}
.slide-group {
  width: 100%;
  height: 100%;
  position: relative;
}
.slide {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  box-shadow: inset 5px 5px 100px black, inset -5px -5px 100px black;
}
.slide-1 {
  background: url(img/slide-1.jpg);
  background-size: cover;
}
.slide-2 {
  background: url(img/slide-2.jpg);
  background-size: cover;
}
.slide-3 {
  background: url(img/slide-3.jpg);
  background-size: cover;
}
.slide-4 {
  background: url(img/slide-4.jpg);
  background-size: cover;
}
.slide:first-child {
  display: block;
}
/********** BUTTONS **********/

.slide-buttons {
  text-align: center;
}
.slide-btn {
  border: none;
  background: none;
  color: #000;
  font-size: 200%;
  line-height: 0.5em;
}
.slide-btn.active,
.slide-btn:hover {
  color: #ed8e6c;
  cursor: pointer;
}
/*****BODY*****/

section:nth-of-type(1) {
  background-color: #fdffff;
}
h1:nth-of-type(1) {
  background-color: #fdffff;
  margin: 0;
  text-align: center;
  padding: 30px;
  font-family: 'Lato', sans-serif;
  color: #004040;
}
.bwrapper {
  width: 70%;
  margin: 50px auto 50px auto;
  background-color: #fdffff;
  font-family: 'Lato', sans-serif;
  box-shadow: .1px .1px 2px #b3de81, -.1px -.1px 2px #b3de81;
}
.hwrapper {
  width: 100%;
}
.twrapper {
  width: 100%;
  margin: auto;
  text-align: center;
}
.col {
  margin: 5%;
}
/*****MEDIA QUERIES*****/

@media only screen and (min-width: 1200px) {
  .twrapper {
    overflow: auto;
    margin: 0;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .col {
    float: left;
    width: 250px;
    margin: 0;
  }
}
@media only screen and (max-width: 930px) {
  header nav ul {
    display: none;
  }
  #menu-icon {
    display: inline-block;
  }
  nav ul,
  nav ul:active {
    position: absolute;
    padding: 40px;
    background-color: #fdffff;
    right: 10px;
    width: 50%;
    border: solid 1px #265c00;
    box-shadow: 1px 1px 5px black, -1px -1px 5px black;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 10px 0;
    margin: 0;
  }
  nav {
    padding: 10px;
  }
  nav:hover ul {
    display: block;
    margin: 0px;
  }
}
@media only screen and (max-width: 435px) {
  .bwrapper {
    width: 100%;
    margin: auto;
  }
  header {
    box-shadow: inset 2px 2px 5px black, inset -2px -2px 5px black;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <title>Wylde Snack Foods | A Dedicated Gluten-Free Facility and A Subsidiary Company of Ener-G Foods Inc.</title>
  <meta name="Description" content="A dedicated gluten-free facility open to private-label business.">
  <meta name="Keywords" content="wylde snack foods, ener-g foods inc">
  <link rel="stylesheet" type="text/css" href="normalize.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="hover.css">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div class="hwrapper">
    <header>
      <a href="#">
        <img src="img/logo02.png" alt="Wylde Snack Foods logo" class="hvr-buzz">
      </a>
      <nav>
        <a href="#" id="menu-icon"></a>
        <ul>
          <li class="hvr-bob"><a href="index.html">Home</a>
          </li>
          <li class="hvr-bob"><a href="products/products.html">Products</a>
          </li>
          <li class="hvr-bob"><a href="contract_mfg/contract_mfg.html">Contract MFG</a>
          </li>
          <li class="hvr-bob"><a href="about/about.html">About</a>
          </li>
          <li class="hvr-bob"><a href="contact/contact.html">Contact</a>
          </li>
          <li class="hvr-bob"><a href="http://www.ener-g.com/" target="_blank">Ener-G Foods</a>
          </li>
        </ul>
      </nav>
    </header>
  </div>

  <div class="bwrapper">
    <h1>Some of Our Products</h1>
    <section>

      <div class="slider">
        <div class="slide-viewer">
          <div class="slide-group">
            <div class="slide slide-1">
            </div>
            <div class="slide slide-2">
            </div>
            <div class="slide slide-3">
            </div>
            <div class="slide slide-4">
            </div>
          </div>
        </div>
        <div class="slide-buttons"></div>
      </div>

    </section>

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/slider.js"></script>

    <div class="twrapper">
      <div class="alignwrap">
        <div class="col left">
          <h3>Our Products</h3>
          <p>
            We are a dedicated gluten-free facility which makes a variety of products. Additionally, we avoid the top allergens listed by FALCPA. Click <a href="products/products.html">here</a> to be redirected to our products page.
          </p>
        </div>

        <div class="col center">
          <h3>Our Clients</h3>
          We are currently open to private-label business; however, other business inquiries may be accepted. Click <a href="">here </a> to be redirected to our Contract MFG.
        </div>

        <div class="col right">
          <h3>Our Certification</h3>
          We are SQF certified with some of our products being certified as organic. Click <a href="certification/certification.html">here</a> to be redirected to our certifications.
        </div>
      </div>
    </div>


    <footer>
      <ul>
        <li><a href="certification/certification.html">Certification</a>
        </li>
      </ul>
      <span>&copy;Wylde Snack Foods</span>
    </footer>
  </div>

</body>

</html>

如何使我的三列布局居中？

How do I make my three column layout centered?

html

css

layout

multiple-columns