3 个 DIV，1 个容器，水平居中对齐

Posted 2023-03-05

【中文标题】3 个 DIV，1 个容器，水平居中对齐

【英文标题】：3 DIVs, 1 Container, Centrally aligned horizontally

【发布时间】：2017-06-29 00:24:31

【问题描述】：

我已将三个DIVs 放入容器DIV。

我想要的如下：

这就是我的目标：

#light-table 
  background-color: #e2e2e2;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 40px;
  padding-right: 40px;
  text-align: left;
  margin-top: 30px;
  margin-bottom: 30px;

#leftdiv 
  float: left;
  padding: 0 20px;
  /*margin:20px 0;*/
  position: relative;
  width: 25%;
  flex-basis: 25%;

#leftdivcontainer 
  vertical-align: middle;
  width: 100%;
  text-align: center;

#light-table-paragraph 
  font-family: 'Droid Serif';
  font-size: 20px;
  color: #2e2e2e;
  text-align: left;
  line-height: 40px;

<div id="light-table">
  <h3 id="light-table-head-style">content.</h3>
  <div id="leftdivcontainer">
    <div id="leftdiv">
      <p id="light-table-paragraph">Left</p>
    </div>
    <div id="leftdiv">
      <p id="light-table-paragraph">Middle</p>
    </div>
    <div id="leftdiv">
      <p id="light-table-paragraph">Right</p>
    </div>
  </div>
</div>

请有人帮忙告诉我哪里出错了？

谢谢！ 斯科特

【问题讨论】：

嘿@Scott Davies - 对于初学者，在您的 html 中将 id 替换为 class，并在 CSS 中将 # 替换为 .，用于那些您拥有多个元素的元素，所以light-table-paragraph 和 leftdiv

谢谢，我会修改用法。你能告诉我这是新手吗？哈哈。

你必须从某个地方开始 :) 祝你好运！

【参考方案1】：

设置 div 包含三个小 div display:flex 并给它容器的 75% 宽度，然后在内容周围设置空间如下：

#leftdiv 
    /*float: left;*/
    padding:0 20px; 
    /*margin:20px 0;*/
    position:relative;
    /* edits */
    width:33.33%;
    flex-basis: 25%; 


#leftdivcontainer 
    vertical-align:middle;
    text-align: center;
    /* edits */
    width:75%;
    display: flex;
    margin: 0px auto;
    justify-content: space-around;


#light-table-paragraph 
    font-family: 'Droid Serif';
    font-size: 20px;
    color: #2e2e2e;
    text-align: left;
    line-height:40px;


#light-table 
    background-color: #e2e2e2;  
    width: 100%;  
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 40px;
    padding-right: 40px;
    text-align: left;
    margin-top:30px;
    margin-bottom: 30px;

<div id="light-table">
     <h3 id="light-table-head-style">content.</h3>
    <div id="leftdivcontainer">
    <div id="leftdiv"><p id="light-table-paragraph">Left</p></div>
    <div id="leftdiv"><p id="light-table-paragraph">Middle</p></div>
    <div id="leftdiv"><p id="light-table-paragraph">Right</p></div>
    </div>
    </div>

【讨论】：

是的，正要说:) 将display: flex; justify-content: space-around; 添加到容器中:) @Scott，同时修复重复的ids。

【参考方案2】：

我会这样做。

给每个 .leftdiv（确实这应该是一个类，id 是唯一的）总视口宽度的 33%：

.leftdiv 
  float: left;
  width: 33%; 

并在这些 div 中将每个段落居中，给它 75% 的宽度：

.leftdiv p 
  display: block;
  width: 75%;
  margin: 0 auto !important; /* you won't need !important if your code is well structured */

这是一个更简洁的解决方案，因为您会注意到没有水平滚动。

Here 是一个密码笔。

此外，您需要清除父 div #leftdivcontainer（也这样做）。

希望这会有所帮助。

【讨论】：

非常感谢它的魅力。我很感激！

酷，@ScottDavies，很高兴我能帮上忙！您是否认为接受的答案更好？不要忘记在项目上线后分享项目。 ;)

也许我错误地接受了一个答案 - 我是论坛的新手，所以我赞成几件事，因为人们从他们的生活中抽出时间来帮助我 :) 它在 scott.ewarena.com/blog 上直播，但它是仍在进行中:)

嗯，是的，*** 是在需要编程时来的地方！ :) 感谢您接受我的回答，并继续攻击您的新站点。你快到了！

是的，它看起来比一周前好多了！我还刚刚从我通过谷歌在这里找到的另一个线程中隐藏了 ios 设备上的视频播放按钮，所以这非常有用。我现在只需要对其他页面进行排序，并在那里获取一些内容！