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

Question

我正在尝试在同一行上显示两个 <div> 元素，并使它们居中。为了使它们居中，我不得不设置 margin:auto。然而，为了让它们在同一行上，我必须执行以下任意一项操作之一：

1. 设置display:inline;（这将取消居中）
2. 将float:left;设置为两个元素（这将取消居中）
3. 设置display:table-cell;（这将取消居中）

我该怎么做才能让两个 divs 居中呢？或者我应该使用其他方法来做到这一点吗？我尝试过使用 <span>，但是 inline 属性与上面设置 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，也许我做错了什么？

第二次编辑：最后一个补充，如何在这两个

元素之间添加空格，因为它们具有盒子阴影，我不希望它们被挤在一起。

- muttley91

Answer 1

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

- sqwk

---

将外部的"text-align: center"也设置为居中对齐。 - karameloso

Answer 2

你可以这样做，但你需要在你的外层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>

希望这能帮到你！

- hayesgm

Answer 3

你尝试过使用display: inline-block;吗？如果你能提供一份HTML代码的例子，那会更有帮助... 如果inline-block不能解决你的问题，可以在http://jsFiddle.net上放一个示例。

- Chris Baker