HTML 以div为中心

Posted 2021-05-24

<div id="wrapper">
        All the content that you want to be centered inside the wrapper goes here.
    </div>


    #wrapper {  
        margin: 0 auto; 
        width: 960px;  
    }

3个Divs等宽以Div为中心（清洁无浮动）[重复]

【中文标题】3个Divs等宽以Div为中心（清洁无浮动）[重复]

【英文标题】：3 Divs equal width centered within Div (Clean without Floats) [duplicate]

【发布时间】：2018-10-30 13:15:17

【问题描述】：

我知道这可以通过花车轻松实现，但我正试图摆脱这种做法。我如何使用display: inline-block; 而不是浮点数来获得相同的结果？

这里有一些带有inline-block的代码： https://jsfiddle.net/hg7wx64k/

这里有一些带有floats的代码： https://jsfiddle.net/hg7wx64k/

#content-container 
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 0 50px 0 50px;


#box1 
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: orange;


#box2 
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: blue;


#box3 
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: yellow;

<div id="content-container" class="container">
  <div id="box1">
    <h1>Box 1</h1>
  </div>
  <div id="box2">
    <h1>Box 2</h1>
  </div>
  <div id="box3">
    <h1>Box 3</h1>
  </div>
</div>

这是 3 个框的屏幕截图，我希望两边的边距相等。我曾想过手动设置边距，但不知道这是否是最干净的解决方案。我可以做很多事情，但我正在努力让我的工作更加干净。同样，这个项目我不会使用 Bootstrap 的网格系统，所以请不要对此提出建议。

只是寻找你们认为最有组织和最实用的方法。

【问题讨论】：

@dippas 它是怎么重复的？提问者已经这样做了，他有 3 个并排的 Div[使用浮动的内联块]，他想有一种方法来控制间距..也许还有另一个重复，但这个不合适

google.com/…

@dippas 抱歉，但问题不是关于 3 div 居中...

我认为这更像是“我可以通过 3 种方法来做到这一点，最佳实践是什么？”比“我该怎么做？”更重要的问题。问题。

当然是。

【参考方案1】：

在容器上使用 display flex。这是对齐事物的现代方式。

Read more on flexbox

#content-container 
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;


 #box1 
  height: 100%;
  width: 30%;
  background-color: orange;


 #box2 
  height: 100%;
  width: 30%;
  background-color: blue;


 #box3 
  height: 100%;
  width: 30%;
  background-color: yellow;

      <div id="content-container" class="container">
        <div id="box1">
        <h1>Box 1</h1>
        </div>
        <div id="box2">
          <h1>Box 2</h1>
        </div>
        <div id="box3">
          <h1>Box 3</h1>
        </div>
      </div>

【讨论】：

这是一个简单的自动回答“使用 flexbox，这样更好” .. 但这如何回答他的问题？你读过他想要的吗？

他正在寻找一种干净的方式来做事。这不是回应吗？

不，再读一遍问题...

感谢您提供资源供我阅读，flex 确实是我正在寻找的东西，并且似乎是现代设计中的流行观点，所以我要开始学习了.

不客气。祝你好运:)

【参考方案2】：

如果你想考虑inline-block 不需要指定边距。您只需要设置元素的宽度并居中即可。

#content-container 
  text-align: center;
  font-size:0;

#content-container > div 
  display: inline-block;
  height: 100px;
  width: 30%;
  font-size:initial;
  animation:anime 2s infinite linear alternate;



#box1 
  background-color: orange;


#box2 
  background-color: blue;


#box3 
  background-color: yellow;


@keyframes anime 
  from 
    width:30%;
  
  to 
    width:20%;
  

<div id="content-container" class="container">
  <div id="box1">
    <h1>Box 1</h1>
  </div>
  <div id="box2">
    <h1>Box 2</h1>
  </div>
  <div id="box3">
    <h1>Box 3</h1>
  </div>
</div>

但是如果你想控制边距和宽度自动设置，可以考虑像这样使用 flexbox：

#content-container 
  padding: 0 50px; /*To control the space*/
  display: flex;
  animation: anime 2s infinite linear alternate;


#content-container>div 
  flex: 1; /*Make the 3 divs the same width and fill the space*/
  text-align: center;


#box1 
  background-color: orange;


#box2 
  background-color: blue;


#box3 
  background-color: yellow;


@keyframes anime 
  from 
    padding: 0 50px;
  
  to 
    padding: 0 100px;
  

<div id="content-container" class="container">
  <div id="box1">
    <h1>Box 1</h1>
  </div>
  <div id="box2">
    <h1>Box 2</h1>
  </div>
  <div id="box3">
    <h1>Box 3</h1>
  </div>
</div>

【讨论】：

完美，这就是我正在寻找的答案。当我回顾以前的一些肮脏的肮脏工作时，试图更好地理解应该和不应该。我将它应用到当前项目中，用更少的代码实现了我正在寻找的东西，并从这里开始更好地理解 flexbox。