사이드 바이 사이드 센터를 중심으로하려고 시도합니다

Question

그래서 저는 4 개의 div가 나란히 서서 페이지 중심에 위치하도록 노력하고 있지만 모든 4 개의 div는 컨테이너 내부에 약간 왼쪽으로 앉아있는 것처럼 보입니다.

다음과 같은 : 컨테이너가 페이지를 중심으로하지만, 내부의 div의가 아닌됩니다

{ [Div 1] [Div 2] [Div 3] [Div 4]   } 

.

<div class="container-1"> 
<div class="table-col-1"> 
    <div class="border-1"> 
    <div class="table-head-1"> 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
    </div> 
    <div class="text-container"> 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
    </div> 
    </div> 
    </div> 
<--DIVS 2-4 HERE--> 
</div> 

그리고 내 CSS :

다음은 각 사업부에 대한 복제의 내 코드의

이 모든 것은 여기에서 찾을 수있는 정보와 함께 패치,하지만 지금 된

.container-1{ 
overflow: hidden; 
margin: 0 auto; 
padding: 0px; 

width: 90%; 
text-align: center; 
border: 3px solid red; 
} 


.table-col-1{ 
padding: 1.5em; 
float: left; 
width: 20%; 
} 

.table-head-1{ 
padding: 1.5em; 
background-color: #515251; 
float: left; 
border-bottom: 2px solid #000000; 
} 

.table-text{ 
font-size: 15px; 
line-height: 18px; 
padding-bottom: 1.5em; 
} 

.text-container{ 
padding-top: 7em; 
padding-bottom: 3em; 
} 

.border-1{ 
border: 2px solid #000000; 
} 

.button{ 
background-color: #d6e042; 
font-weight: bold; 
font-size: 14px; 
padding: 15px; 
} 

나는 붙어있어 해결책을 찾을 수 없다.

Answer 1

float: left에서 display: inline-block으로 변경하면 요소가 가운데에 배치됩니다.

.container-1 { 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    padding: 0px; 
 
    width: 90%; 
 
    text-align: center; 
 
    border: 3px solid red; 
 
} 
 

 
.table-col-1 { 
 
    padding: 1.5em; 
 
    width: 20%; 
 
    display: inline-block; 
 
} 
 

 
.table-head-1 { 
 
    padding: 1.5em; 
 
    background-color: #515251; 
 
    float: left; 
 
    border-bottom: 2px solid #000000; 
 
} 
 

 
.table-text { 
 
    font-size: 15px; 
 
    line-height: 18px; 
 
    padding-bottom: 1.5em; 
 
} 
 

 
.text-container { 
 
    padding-top: 7em; 
 
    padding-bottom: 3em; 
 
} 
 

 
.border-1 { 
 
    border: 2px solid #000000; 
 
} 
 

 
.button { 
 
    background-color: #d6e042; 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
    padding: 15px; 
 
}

<div class="container-1"> 
 
<div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    <div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    <div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    <div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

아니면 인 flexbox를 사용하는 것을 선호하는 경우, .container-1에 display: flex; justify-content: center;을 적용하고 .table-col-1에서 플로트를 제거 -하지 마십시오는, 그 부분은 필요하지 않으며 부모의 경우 사용하지 않을 플렉스입니다. 에 StackOverflow에

.container-1 { 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    padding: 0px; 
 
    width: 90%; 
 
    text-align: center; 
 
    border: 3px solid red; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.table-col-1 { 
 
    padding: 1.5em; 
 
    width: 20%; 
 
} 
 

 
.table-head-1 { 
 
    padding: 1.5em; 
 
    background-color: #515251; 
 
    float: left; 
 
    border-bottom: 2px solid #000000; 
 
} 
 

 
.table-text { 
 
    font-size: 15px; 
 
    line-height: 18px; 
 
    padding-bottom: 1.5em; 
 
} 
 

 
.text-container { 
 
    padding-top: 7em; 
 
    padding-bottom: 3em; 
 
} 
 

 
.border-1 { 
 
    border: 2px solid #000000; 
 
} 
 

 
.button { 
 
    background-color: #d6e042; 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
    padding: 15px; 
 
}

<div class="container-1"> 
 
<div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
<div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div><div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div><div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> </div>

Answer 2

나는 당신이 무엇을 얻으려고하는지 알고 있다고 생각합니다.

내 대답은 플렉스 박스를 사용합니다. Flexboxes는 아직 구현하지 못했을 때 무서워 보이지만 다음 링크를 방문하여 코드와 솔루션을보고 작동 방식을 확인하십시오. 그들은 놀라워. display: flex, flex-direction: row, justify-content: center를 사용

https://codepen.io/sequential/pen/LxvJrr

는 달성이 서식 작업이 용이합니다.

또한이 문서는 더 읽을 거리가 좋습니다.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

희망이 도움 스택 오버플로에 오신 것을 환영합니다!