水平对齐没有浮动的div [重复]答案

【问题标题】：Horizontally align div without float [duplicate]水平对齐没有浮动的div [重复]
【发布时间】：2014-08-07 07:43:45
【问题描述】：

我想知道是否存在一种优雅的方式来水平对齐 3 divs 不使用 float css 属性。

HTML：

<div id="parent">  
  <div id="first">Left</div>  
  <div id="second">Middle</div>  
  <div id="third">Right</div>
</div>

我问这个问题是因为父级div 没有float 属性，并且将float 添加到子级会导致页面调整大小出现问题。

【问题讨论】：

stackoverflow.com/questions/17130711/…

标签： html css alignment

【解决方案1】：

您可以将display:inline-block 或display:table-cell 与内部内容一起使用。

Flex 布局（另见T J's answer）：

#parent{ display:flex; justify-content: space-between; }

JSFiddle

表格布局：

#parent{ display:table; width:100%; }
#parent div{ display:table-cell; }
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

内嵌块布局：

#parent{ width:100%; white-space:nowrap; }
#parent div{ display:inline-block; width:33.3%;}
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

【讨论】：

@potashin 你能告诉我如何对齐四个 div
@MuhammadHamzaShahid：嗯，几乎一样，唯一的区别取决于您希望如何对齐容器本身中的项目

【解决方案2】：

添加到notulysses的answer，如果古代浏览器支持不是问题，可以使用css3 Flexible_boxes。

通过应用display:flex，子 div 将水平对齐（默认情况下）

#parent{
 display:flex;
 justify-content:space-around;
}

更多关于flexbox @ CSSTricks

这将避免 inline-block 元素的空白问题

JSfiddle

【讨论】：

我认为这是总体上更好的答案。

【解决方案3】：

除了寻找浮动的解决方法之外，您还可以使用以下修复来解决“调整大小问题”（至少我认为它是由什么引起的）：

使用浮动后，您应该始终清除浮动。你可以通过添加一个额外的<div> 来实现这一点。

<div id="parent">  
  <div id="first">Left</div>  
  <div id="second">Middle</div>  
  <div id="third">Right</div>
  <div class="clear"></div>
</div>

在 CSS 中：

.clear{
  clear: both;
}

【讨论】：

@notulysses：当代码完全可读时，你能不改变其他人答案的缩进样式吗？它只会惹恼人们，没有真正的好处。如果您正在编辑答案以添加语法突出显示，那么仅添加语言提示就足够了。

【解决方案4】：

#parent { 
    display: table; 
}

#first, #second, #third { 
    display: table-cell; 
}

【讨论】：

您应该添加一个简短的解释，说明为什么这个答案会起作用。另请注意，内联 CSS 通常不被视为好的代码。也无需在您的答案中重复相同的 HTML，因此您可以将纯 CSS 作为答案发布。
@DarkAshelin 只是举例，他可以把这个css放到css文件中
即使只是一个例子，它也会鼓励没有经验的编码人员通过复制您输入的内容来使用这种“混乱/糟糕”的编码方式。

【解决方案5】：

使用下面的 CSS 样式：

#parent div{ display: inline-block; }

Working Fiddle

【讨论】：

【解决方案6】：

使用下面的 CSS，您可以实现您的目标：

#parent{
 width:140px;
    height:30px;
    border:1px solid #CCC; 
}
#first{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid red;
}
#second{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid green;
}
#third{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid blue;
}

Fiddle

【讨论】：