Question

我有一个外部div元素，里面有两个内部div元素。我想将两个内部div元素中的一个居中，另一个内部div元素应该留在左边。

这是带有示例外部和内部div的代码，它显示它实际上不在它下面的内部和外部div的中心。

您还可以在此处找到代码库：http://codepen.io/TheCodingWombat/pen/YyzmNE

code.html

<div class="outer-example">
  <div class="inner-example">
    <h3>The Center</h3>
  </div>
</div>
<div class="outer">
  <div class="inner1">
    <h4>Topic</h4>
  </div>
  <div class="inner2">
    <h3>Board Title</h3>
  </div>
</div>

code.css

.outer-example {
  text-align: center;
}

.outer {
  text-align: center;
}

.outer > div {
  display: inline-block;
}

.inner1 {
  float: left;
}

Answer 1

查看代码笔的my modified version。基本上，我改变它，以便不是浮动内部元素，而是将其位置相对于包含它和期望的居中div的父容器更改为绝对。

.outer {
  ...
  position: relative;
}

.inner1 {
  position: absolute;
  left: 0px;
  top: 0px;
}

当您float某些内容时，它会被删除并变为非阻止内容，但float内容仍会影响inline和inline-block元素的定位。< / p>

外部div中2个内部div的中心1

1 个答案: