그룹 내용을 가운데에 정렬하지 않고 그룹 내용을 정렬하는 방법은 무엇입니까?

저는 웹 사이트 중간에 일부 콘텐츠 상자를 가운데에 놓으려고합니다. 그러나 다음과 같은 내용으로 가운데에 놓으려고 할 때마다 제대로 맞춰지지 않는 것 같습니다. 그렇다면이 콘텐츠 박스를 올바르게 배치하고 올바른 방향으로 나를 안내 할 수있는 방법을 아는 사람이 있습니까? 감사.그룹 내용을 가운데에 정렬하지 않고 그룹 내용을 정렬하는 방법은 무엇입니까?

'상단 : 50 %, 하단 : 50 %; , 변형 : 번역 (-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>

이를 위해

출처

2017-12-29 Gon Supreme

한 가지 방법, 즉 75 %가 특정 값 DIV의 폭을 설정하고, 마진 "0 AUTO"가로 자동 중심으로한다. 귀하의 경우에는 div가 중심에있는 요소이기 때문에 몸의 너비를 100 %로 지정해야합니다. 몸이 100 %가되기를 원하지 않으면 원하는 너비만큼 그것을 만들 수 있고 " 0 자동 "마진을 페이지에 중앙에 놓습니다. 그러나 그렇게함으로써 당신은 다른 요소들을 가지고 그들이 지금있는 곳으로 돌아 가게해야합니다. .group 콘텐츠의 이익률은 "75px 자동"으로 설정하는 방법을

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; 
}

공지 사항 ... 아래 CSS를 사용하여 해당 CSS를 교체하십시오. 이것은 navbar와 footer가 75px 위쪽과 아래쪽 여백을 추가하여 .group-content가 모두 보이는지 확인합니다.

출처

2017-12-29 03:30:26 mep2664

덕분에이 솔루션은 제대로 중심을위한 그러나, 나는 100 % 폭을 변경, 괜찮 았는데. –

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>

출처

2017-12-29 04:04:26

이 센터는 약간이지만 완벽하지는 않습니다. 여기에서 볼 수 있습니다. 아래쪽 절반에는 큰 차이가 있습니다. http://prntscr.com/hto43r –

당신은 100 %
메이크업 그룹 콘텐츠 마진에 폭을 960 픽셀에 몸 폭을 해결 한 : 자동;

는 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

출처

2017-12-29 04:11:57

그룹 내용을 가운데에 정렬하지 않고 그룹 내용을 정렬하는 방법은 무엇입니까?

답변

관련 문제