我正在尝试显示两个< div>元素在同一条线上,但在中心.为了使它们居中,我不得不设置保证金：auto;但是,为了让两个人在同一条线上,我必须做以下任何一种情况：
>设置显示：内联; (取消对中)
>设置浮动：左;两者(取消对中)
>设置显示：table-cell; (取消对中)
我能做些什么来让两个div都在中心？或者我应该使用其他东西来做到这一点？我试过< span>但是内联属性与上面设置的显示相同：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>之间放置空间的最佳方法是什么？元素,因为它们有盒子阴影,我不希望它们被挤压在一起.
解决方法
你可以这样做,但你需要在你的外部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>
希望这可以帮助！
