CSS - 使 div 水平对齐

Posted 2023-03-05

【中文标题】CSS - 使 div 水平对齐

【英文标题】：CSS - Make divs align horizontally

【发布时间】：2010-09-07 10:00:33

【问题描述】：

我有一个带有固定width 和height 的容器div，带有overflow: hidden。

我想要一个水平的浮动行：这个容器内的左 div。向左浮动的 Div 在读取其父级的右边界后自然会推到下面的“线”上。即使父母的height 不允许这样做，也会发生这种情况。看起来是这样的：

我希望它看起来如何：

![Right][2] - 删除了已被广告替换的图像小屋图像

注意：我想要的效果可以通过使用内联元素和white-space: no-wrap来实现（我在显示的图像中就是这样做的）。然而，这对我没有好处（原因太长，无法在此解释），因为子 div 需要浮动块级元素。

【问题讨论】：

您的图片链接似乎已损坏。如果您还有原件，请重新上传到 stack.imgur。谢谢！

【参考方案1】：

您可以在容器中放置一个足够宽以容纳所有浮动 div 的内部 div。

#container 
  background-color: red;
  overflow: hidden;
  width: 200px;


#inner 
  overflow: hidden;
  width: 2000px;


.child 
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

【讨论】：

我怎样才能使外部 div 中心？我尝试在外部 div 上添加 align="center"，似乎不起作用。

这也适用于百分比宽度。在我的情况下，我使用带有width: 200%; 的容器div，并且每个子元素都是width: 50%;。只要我有一个带有overflow: hidden;的父容器，我就可以在容器上使用transform: translateX(n%);来模拟轮播效果。

【参考方案2】：

style="overflow:hidden" 用于父级div 和style="float: left" 用于所有子级divs 对于使divs 水平对齐对于IE7 及更低版本的旧浏览器非常重要。

对于现代浏览器，您可以将style="display: table-cell" 用于所有子divs，它会正确水平呈现。

【参考方案3】：

如果需要，您现在可以使用 css flexbox 水平和垂直对齐 div。一般公式是这样的

parent-div 
  display: flex;
  flex-wrap: wrap;
  /* for horizontal aligning of child divs */
  justify-content: center;
  /* for vertical aligning */
  align-items: center;


child-div 
  width: /* yoursize for each div */
  ;

【讨论】：

优雅的解决方案。

【参考方案4】：

这似乎接近你想要的：

#foo 
  background: red;
  max-height: 100px;
  overflow-y: hidden;


.bar 
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;

<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

【参考方案5】：

您可以使用clip 属性：

#container 
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;

请注意 position: absolute 和 overflow: hidden 以使 clip 正常工作。

【讨论】：

clip 的浏览器支持什么？

来自w3schools.com/cs-s-ref/pr_pos_clip.asp：所有主流浏览器都支持clip属性。注意：IE7 及更早版本不支持值“inherit”。 IE8 需要一个!DOCTYPE。 IE9 支持“继承”。

【参考方案6】：

float: left, display: inline-block 如果元素超过容器的宽度，都将无法水平对齐元素。

请务必注意，如果元素必须水平显示，则容器不应换行： white-space: nowrap

【参考方案7】：

让它们向左浮动。至少在 Chrome 中，您不需要在 LucaM 的示例中使用包装器 id="container"。

【参考方案8】：

你可以这样做：

#container 
  background-color: red;
  width: 200px;


.child 
  background-color: blue;
  width: 150px;
  height: 50px;

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>