logo标签列表

为什么我的div不能水平对齐？

htmlcss
3
我正在尝试水平对齐三个位于更大的
中的
，以下是我的代码：
```html

我正在尝试水平对齐三个位于更大的

中的
，以下是我的代码：

```
请注意：上述内容已经翻译完成并保留了HTML标记。 

#creators {
  text-align: center;
}
.creator_name {
  width: 22%;
  margin: 1% 1%;
}
<div id="about" class="big-part">
  <h3>About us</h3>
  <p>Text</p>
</div>

<div id="work" class="big-part">
  <h3>Work</h3>
  <p>Text</p>
</div>

<div id="creators" class="big-part">
  <h3>Creators</h3>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
</div>

我尝试使用float: left，但网页出现了故障。 使用float:left：result 欢迎任何帮助，谢谢！

这不好吗？https://jsfiddle.net/bz1yyq19/ - Omri Aharon
你是想要将它们显示在一行吗？ - Jacob G
谢谢大家！你们回答得非常迅速！ - FlipFloop
@FilpFloop 抱歉关于那些琐碎的问题，演示现在已经在代码片段上了。 - zer00ne
9个回答
2
尝试在 "creator_name" 上使用 "display: inline-block"，这可以使其以行内块的形式显示。
.creator_name {
    width: 22%;
    margin: 1% 1%;
    display: inline-block;
}
2
你可以使用 display: inline-block; 结合 vertical-align: top; 和 margin-left: -4px; 来将 div 对齐在大的 div 中。 

#creators {
  text-align: center;
}
.creator_name {
  width: 30.33%;
  display: inline-block;
  vertical-align: top;
  /*
   * Used to fight white space between divs
   * https://css-tricks.com/fighting-the-space-between-inline-block-elements/
   */
  margin-left: -4px;
  margin: 1% 1%;
}
<div id="about" class="big-part">
  <h3>About us</h3>
  <p>Text</p>
</div>

<div id="work" class="big-part">
  <h3>Work</h3>
  <p>Text</p>
</div>

<div id="creators" class="big-part">
  <h3>Creators</h3>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
</div>

有关margin-left: -4px;的更多信息，请参见：解决行内块元素之间的空格问题

1
谢谢这篇文章，非常有用。 - zer00ne
1
记得在使用浮动元素时清除浮动。简单的方法是在父容器上使用 overflow: auto： 

#creators {
  text-align: center;
  overflow: auto;
}
.creator_name {
  width: 22%;
  margin: 1% 1%;
  float: left;
  background: #EEE;
}
<div id="creators" class="big-part">
  <h3>Creators</h3>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
</div>

1
我看到你正在尝试居中对齐它们。使用CSS弹性布局。
将所有3个div放入一个包装器div中。然后给包装器div设置display:flex;justify-content:center; CSS属性。 

.wrapper{display:flex;justify-content:center;}
.inner{background:#f2f5f6;margin: 0 1em 0;border:solid 1px #ffcc00;padding:.25em;}
<div class="wrapper">
  <div class="inner">One</div>
  <div class="inner">Two</div>
  <div class="inner">Three</div>
</div>

0

我不明白为什么不使用float:left，我已经用float:left做了相同的示例并且可以工作。 看： html

<div id="content">
        <div id="tree">
            <ul id="ulroot">
            </ul>
        </div>
        <div id="file">
            <ul id="ulfile"></ul>
        </div>  
            <div id="detail"></div> </div>

css

#content{
height: 600px;
width: 100%;
border: 2px solid #c0c0c0;
background-color: #80FF80;
display:block}

#tree{
float:left;
height: 100%;
min-height:100%;
width: 30%; }
#file{
float:left;
height: 100%;
width: 30%;}
#detail{
float:left;
height: 100%;
min-height:100%;
width: 40%;}
0

Give this a try. Your code was almost there just needed some more CSS. 

h3 {
  text-align: center;
}
#about, #work {
  background: #7D26CD;
  margin-bottom: 15px;
  border-radius: 5px;
  color: #fff;
}
#creators {
    text-align: center;
    clear: both;
    width: 100%;
}
.creator_name {
   width: 31%;
   margin: 1% 1%;
   float: left;
   display: inline-block;
}

.big-part {
  float: left;
  width: 100%;
}
<div id = "about" class = "big-part">
    <h3>About us</h3>
    <p>Text</p>

</div>

<div id = "work" class = "big-part">
    <h3>Work</h3>
    <p>Text</p>
</div>

<div id = "creators" class = "big-part">
    <h3>Creators</h3>
    <div class = "creator_name">
        <h4>Name</h4>
        <p>Text</p>
    </div>

    <div class = "creator_name">
        <h4>Name</h4>
        <p>Text</p>
    </div>

    <div class = "creator_name">
        <h4>Name</h4>
        <p>Text</p>
    </div>
</div>

0

这是因为默认情况下 div 的 display: block;。

#creators {
  text-align: center;
}
.creator_name {
  width: 22%;
  margin: 1% 1%;
  display: inline-block;
}
<div id="about" class="big-part">
  <h3>About us</h3>
  <p>Text</p>
</div>

<div id="work" class="big-part">
  <h3>Work</h3>
  <p>Text</p>
</div>

<div id="creators" class="big-part">
  <h3>Creators</h3>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
  <div class="creator_name">
    <h4>Name</h4>
    <p>Text</p>
  </div>
</div>

0
将display: inline-block添加到您的.creator_name规则中。这将阻止divs自动占用整个宽度，不允许同一行上的任何其他元素。以下是一个示例：https://jsfiddle.net/8hLodkup/。
0

更新

抱歉关于代码片段的问题，免费账户可能有使用次数限制。无论如何，我已经将演示放在了代码片段中。

看起来我太快地制作了第一个演示，并且制作了与您想要的不同的布局，我的错。这是一个基于第一个演示构建的布局，基本上我将#siteNav设置为flexcolumn。

列布局

@charset "utf-8";

/* Core CSS */

html {
  box-sizing: border-box;
  font: 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
body {
  background: #121;
  color: #FEF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 100vw;
  height: 100vh;
}
#siteNav {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}
#creators {
  text-align: center;
}
.creator_name {
  width: 31%;
  display: inline-block;
}
.big-part {
  display: table-cell;
  text-align: center;
}
#about,
#work,
#creators {
  width: 100%;
}
<nav id="siteNav">
  <section id="about" class="big-part">
    <h3>About us</h3>
    <p>Text</p>
  </section>

  <section id="work" class="big-part">
    <h3>Work</h3>
    <p>Text</p>
  </section>

  <section id="creators" class="big-part">
    <h3>Creators</h3>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
  </section>
</nav>

更改

  • 我同意，floats 很糟糕。

  • 将所有内容包装在一个 <nav> 中。

  • 添加 CSS 默认值以平衡浏览器默认值的任何不一致之处。

  • 设置 <nav> 的 display: table、table-layout: fixed 和 border-collapse。现在，#siteNav 在所有方面都是一个表格。

  • 然后将 #about、#work 和 #creators 设置为 display: table-cell。

  • 将每个 .big-part 设为 <section>，这样它们在标记中更容易看到。

  • #creators 中的 3 个单独的内容块设为 display: inline-block。

  • 不用说，此布局是响应式的。

宽度比例

第一级 #siteNav 100%

#about 20% / #work 20% / #creators 60%

第二级 #creators 60%

.creator_name 31% x 3 = 93%

行布局

@charset "utf-8";

/* Core CSS */

html {
  box-sizing: border-box;
  font: 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
body {
  background: #121;
  color: #FEF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 100vw;
  height: 100vh;
}
#siteNav {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
#creators {
  text-align: center;
}
.creator_name {
  width: 31%;
  display: inline-block;
}
.big-part {
  display: table-cell;
  text-align: center;
}
#about,
#work {
  width: 20%;
}
#creators {
  width: 60%;
}
<nav id="siteNav">
  <section id="about" class="big-part">
    <h3>About us</h3>
    <p>Text</p>
  </section>

  <section id="work" class="big-part">
    <h3>Work</h3>
    <p>Text</p>
  </section>

  <section id="creators" class="big-part">
    <h3>Creators</h3>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
    <div class="creator_name">
      <h4>Name</h4>
      <p>Text</p>
    </div>
  </section>
</nav>

没问题，我注意到你取消了这个答案，这不是你想要的吗？如果你在找什么，请随时告诉我。 :) - zer00ne
哦，好的，谢谢@FlipFloop，如果你还有任何问题，请告诉我。 :) - zer00ne
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接