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

将import moment from "moment"; // ... this.state = { startDate: moment(this.props.start), };更改为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;
}

或者，如果您更喜欢使用flexbox，请将<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>应用于display: flex; justify-content: center;并从.container-1移除浮动 - 或者不要，该部分不是必需的，如果不是，则不会使用父母是flex。

.table-col-1

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

Answer 2

我想我知道你想要的是什么。

我的回答是使用flex-box。我知道当你从未实现它们时，flexboxes听起来很可怕，但请访问下面的链接查看代码和解决方案，看看它们是如何工作的。他们很棒。

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

使用display: flex，flex-direction: row，justify-content: center，可以轻松完成此格式设置任务。

这也是一篇很好的文章，可以进一步阅读。

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

希望这会有所帮助，欢迎来到Stack Overflow！

试图并排中心

2 个答案: