Question

我正在尝试在同一行显示两个<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>元素之间放置空格的最佳方法是什么，因为它们有框阴影，我不希望它们被挤压在一起。

Answer 1

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

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>

希望这有帮助！

Answer 3

你试过display: inline-block;吗？您正在使用的HTML示例有助于...如果内联块无法解决您的问题，请将其放在http://jsFiddle.net。

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

3 个答案: