如何对齐组内容而不将其中的所有内容集中在一起？

问题描述 投票：0回答：3

我正试图在我的网站中间放置一些内容框，但是每当我尝试将它们集中在下面这样的内容时，它似乎并没有正确居中。那么有谁知道如何正确地将这些内容框集中在一起并指出我正确的方向？谢谢。

'上：50％;，下限：50％; ，transform：translate（-50％， - 50％）;'

body {
      background-color: #323232;
      max-width: 960px;
      padding: 0;
      margin: 0;
      font-family: Lato;
      }

      nav a {
      color: #fff;
      text-decoration: none;
      padding: 20px 25px;
      display: inline-block;
      }

      .fixed-header, .fixed-footer {
      background: #333;
      color: #fff;
      width: 100%;
      position: fixed;
      text-align: center;
      z-index: 10;
      background-color: #202020;
      }

      .fixed-header {
      top: 0;
      }

      .fixed-footer {
      bottom: 0;
      padding: 20px 0px;
      }

      .fixed-header a:hover {
      color: #c1c1c1;
      }

      .fixed-footer a {
      color: #fff;
      font-weight: lighter;
      text-decoration: none;
      }

      .group-content {
      max-width: 960px;
      text-align: center;
      margin-bottom: 4px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;

      }

      .group-content h3 {
      margin-top: 10px;
      font-weight: normal;
      font-size: 20px;
      color: white;
      }

      .group-content p {
      margin-top: 3px;
      font-weight: lighter;
      font-size: 20px;
      color: white;
      }

      .content {
      width: 30%;
      background-color: #202020;
      display: flex;
      flex-direction: column;
      padding: 20px 0 20px 0;
      align-items: center;
      margin-top: 20px;
      }

      .content >* {
      max-width: 200px;
      text-align: center;
      margin: 0;
      }
<!DOCTYPE html>

    <html lang="en">

     <head>
      <title>Kumo99.cf</title>
      <meta charset="UTF-8">
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <link rel="icon" href="favicon.ico">
     </head>

     <body>

    <div class="fixed-header">
       <nav>
         <a href="index.html">HOME</a>
         <a href="projects.html">PROJECTS</a>
         <a href="about.html">ABOUT</a>
       </nav>
    </div>

    <div class="fixed-footer">
     <a href="https://steamcommunity.com/id/kumo99">Made by Kumo © 2018</a>
    </div>

    <div class="group-content">
       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Arma 3: Exile Server</h3>
         <p>A project for improving the exile mod.</p>
       </div>

       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Reserved Space</h3>
         <p>Reserved space for future projects</p>
       </div>

       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Reserved Space</h3>
         <p>Reserved space for future projects</p>
       </div>

       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Reserved Space</h3>
         <p>Reserved space for future projects</p>
       </div>

       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Reserved Space</h3>
         <p>Reserved space for future projects</p>
       </div>

       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Reserved Space</h3>
         <p>Reserved space for future projects</p>
       </div>
     </div>

     </body>
    </html>
html css alignment
3个回答
0
投票

实现此目的的一种方法是将div的宽度设置为特定值，即75％，并将边距设置为“0 auto”，自动将其水平居中。在你的情况下，你还需要使你的身体宽度为100％，因为这是div居中的元素。如果你不希望你的身体是100％你可以做任何你想要的宽度并应用“ 0自动“你的身体边缘，所以它在页面的中心。但是，通过这样做，您将不得不与其他元素一起使用，以使它们回到现在的位置。尝试使用下面的css替换相应的css ...

body {
  background-color: #323232;
  width:100%;
  padding: 0;
  margin: 0;
  font-family: Lato;
}

.group-content {
  max-width: 960px;
  text-align: center;
  width: 75%;
  margin: 75px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

请注意.group-content中的边距如何设置为“75px auto”。这解释了导航栏和页脚，以确保通过添加75px的上下边距可以看到.group-content。

0
投票
  1. 你有固定的体宽到960px使你的宽度达到100％
  2. 使组内容保证金到保证金：auto;

CSS：

  body {
      background-color: #323232;
      padding: 0;
      margin: 0;
      font-family: Lato;
    }
    .group-content {
      max-width: 960px;
      text-align: center;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }

工作JSFiddle：HERE

0
投票

 body {
  background-color: #323232;
  width:100%;
  padding: 0;
  margin: 0;
  font-family: Lato;
 }
      nav a {
      color: #fff;
      text-decoration: none;
      padding: 20px 25px;
      display: inline-block;
      }

      .fixed-header, .fixed-footer {
      background: #333;
      color: #fff;
      width: 100%;
      position: fixed;
      text-align: center;
      z-index: 10;
      background-color: #202020;
      }

      .fixed-header {
      top: 0;
      }

      .fixed-footer {
      bottom: 0;
      padding: 20px 0px;
      }

      .fixed-header a:hover {
      color: #c1c1c1;
      }

      .fixed-footer a {
      color: #fff;
      font-weight: lighter;
      text-decoration: none;
      }


 

  .group-content {
  max-width: 960px;
  text-align: center;
  width: 75%;
  margin: 75px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

      .group-content h3 {
      margin-top: 10px;
      font-weight: normal;
      font-size: 20px;
      color: white;
      }

      .group-content p {
      margin-top: 3px;
      font-weight: lighter;
      font-size: 20px;
      color: white;
      }

      .content {
      width: 30%;
      background-color: #202020;
      display: flex;
      flex-direction: column;
      padding: 20px 0 20px 0;
      align-items: center;
      margin-top: 20px;
      }

      .content >* {
      max-width: 200px;
      text-align: center;
      margin: 0;
      }
<!DOCTYPE html>

    <html lang="en">

     <head>
      <title>Kumo99.cf</title>
      <meta charset="UTF-8">
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <link rel="icon" href="favicon.ico">
     </head>

     <body>

    <div class="fixed-header">
       <nav>
         <a href="index.html">HOME</a>
         <a href="projects.html">PROJECTS</a>
         <a href="about.html">ABOUT</a>
       </nav>
    </div>

    <div class="fixed-footer">
     <a href="https://steamcommunity.com/id/kumo99">Made by Kumo © 2018</a>
    </div>

    <div class="group-content">
       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Arma 3: Exile Server</h3>
         <p>A project for improving the exile mod.</p>
       </div>

       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Reserved Space</h3>
         <p>Reserved space for future projects</p>
       </div>

       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Reserved Space</h3>
         <p>Reserved space for future projects</p>
       </div>

       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Reserved Space</h3>
         <p>Reserved space for future projects</p>
       </div>

       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Reserved Space</h3>
         <p>Reserved space for future projects</p>
       </div>

       <div class="content">
         <img src="https://i.imgur.com/KPHMNie.png">
         <h3>Reserved Space</h3>
         <p>Reserved space for future projects</p>
       </div>
     </div>

     </body>
    </html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.