居中 <div> 并显示在同一行答案

【问题标题】：Center <div> and Display on Same Line居中 <div> 并显示在同一行
【发布时间】：2011-10-21 02:27:29
【问题描述】：

我试图在同一行显示两个 <div> 元素，但在中心。为了使它们居中，我必须设置margin:auto;但是，为了让两个在同一行，我必须执行以下任一操作：

设置display:inline;（取消居中）
将float:left; 设置为两者（取消居中）
设置display:table-cell;（取消居中）

我该怎么做才能让divs 都在中心？或者我应该使用其他东西来做到这一点？我试过<span>，但内联属性的作用与上述设置display:inline;相同。

编辑：这是我尝试将其应用于 <div> 元素的 CSS：

.homediv {
    background-color:#F7F7F7;
    border:1px solid #FFFFFF;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    /* width must be defined in the actual element because it can have various sizes */
    -webkit-box-shadow: 0px 0px 8px #888888;
    -moz-box-shadow: 0px 0px 8px #888888;
    box-shadow: 0px 0px 8px #888888;
    margin:auto;
    text-align:center;
    padding:4px;
}

在 HTML 文件中，我只为每个元素添加了一个宽度，现在我尝试添加不同的显示属性来解决这个问题。下面建议的“包装器”想法似乎是唯一的解决方案，但是使用这个 CSS 可能是我做错了什么？

第二次编辑：作为最后的补充，在这两个 <div> 元素之间放置空间的最佳方式是什么，因为它们有盒子阴影，我不希望它们被挤在一起。

【问题讨论】：

标签： html css

【解决方案1】：

将两个元素包裹在另一个元素中。为内部元素设置display:inline-block;，为外部元素设置margin:0 auto;。

【讨论】：

text-align: center 对于外部的也可以。

【解决方案2】：

你试过display: inline-block;吗？您正在使用的 HTML 示例会有所帮助...如果 inline-block 不能解决您的问题，请在 http://jsFiddle.net 提交一个。

【讨论】：

【解决方案3】：

你可以这样做，但你需要在你的外部 div 上有一个明确的宽度。

试试这个例子：

.outer {
  width: 200px;
  margin: 0 auto;  
}

.inner1 {
  float: left;
  background-color:
    red; padding: 20px;
}
.inner2 {
  float: left;
  background-color: aqua;
  padding: 20px;
}

<div class="outer">
  <div class="inner1">Hi</div>
  <div class="inner2">Stackoverflow</div>
</div>

希望这会有所帮助！

【讨论】：