中心 1 of 2 inner divs in outer div

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 一些东西时，它大部分被删除并变成非阻塞的，但是 floated 东西仍然会影响 inline 和 inline-block 元素的定位.

中心 1 of 2 inner divs in outer div

Center 1 of 2 inner divs in outer div

html

css

centering