中心<div>并在同一行显示

Question

我试图<div>在同一条线上显示两个元素,但在中心.为了使它们居中,我必须设定margin:auto; 但是,为了让两个人在同一条线上,我必须做以下任何一种情况:

1. 设置display:inline;(取消定心)
2. 设置float:left;为两者(取消对中)
3. 设置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>元素之间放置空间的最佳方法是什么,因为它们有盒子阴影,我不希望它们被挤压在一起.

Answer 1

您可以这样做，但您需要在外部 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>

希望这可以帮助！