CSS如何在不使用浮动的情况下将两个DIV对齐在同一行答案

【问题标题】：CSS How to align two DIVs on the same line without using floatsCSS如何在不使用浮动的情况下将两个DIV对齐在同一行
【发布时间】：2014-04-15 13:11:52
【问题描述】：

这一定是可能的！

我已经阅读了该网站上发布的数十个问题，并且只是盲目地搜索了 Google。我有一个容器 DIV 和容器内的两个 DIV。我希望容器内的所有内容都居中，但容器内的两个 DIV 彼此相邻对齐。

我见过的唯一方法是在容器内浮动两个 DIV。但是如果我浮动它们，那么我就不能让它们居中。居中是指我希望左 DIV 的右边界接触（或几乎接触）右 DIV 的左边界。

有人请教我！我发誓我会回到餐桌上！我没有发布任何代码，因为我没有任何代码

感谢任何可以帮助我的人！

【问题讨论】：

【解决方案1】：

将以下内容应用于父级

display: flex;
justify-content:center;
align-items: center;

我个人在定位元素时远离浮动。 Flex 是一种根据需要对齐项目的聪明方法。可以调整 justify-content 设置以移动您认为合适的元素

【讨论】：

【解决方案2】：

Fiddle

用于容器

text-align:center;

盒子

 display:inline-block;

【讨论】：

【解决方案3】：

在父级上使用display:inline-block 和text-align:center

【讨论】：