html - 试图并排居中 div

Question

所以我试图让 4 个 div 并排放置，并让它们在页面上居中，但所有 4 个 div 似乎都位于容器内稍微偏左的位置。

看起来像这样:

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

容器位于页面中心但内部的 div 不是。

这是我为每个 div 复制的代码:

<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，应用 display: flex; justify-content: center; 到 .container-1 并从 .table-col-1 中删除 float - 或者不，那部分是' t 是必要的，如果父级是 flex 则将不使用。

.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>