中心外部div中的內部div div

Question

我有一個外部div元素，裏面有兩個內部div元素。我想要將兩個內部div元素中的一個居中，另一個內部div元素應該留在左側。

下面是一個示例外部和內部div的代碼，顯示它實際上不在其下面的內部和外部div中居中。

您還可以找到一個在這裏codepen：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元素。