在div中定位图标

Question

我试图将图标定位在div的左右两侧。

但正如你在我的小提琴里看到的那样，它不起作用：http://jsfiddle.net/L9rwhuor/2/

左边的图标不在垂直方向的中心，右边的图标在右下角，不在中心。

你知道为什么不能正常工作吗？

Html:

<div id="container">
    <div class="box-left">
        <div class="box-left-up">
            <h2>Test</h2>
            <div class="text">
                <i class="fa fa-chevron-circle-left" style="float:left; margin-top:15px;"></i>
                <p>test 1</p>
                <p>test 2</p>
                <p>test 2</p>
                <p>test 2</p>
                <i class="fa fa-chevron-circle-right" style="clear:both;float:right; margin-top:15px"></i>
            </div>
        </div>
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}
h1 {
    text-align: center;
}
#container {
    margin: 0 auto;
    width: 960px; 
}
#container .text{
    text-align: center;
}
#container h2{
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid #444;
}
#container .box-left{
    float: left;
    width:  480px;
    background: green;
}

Answer 1

在这种情况下，我甚至不会考虑浮点运算。这是一个绝对定位的好地方。

.text {
   position: relative;
}
.right-button {
   position: absolute;
   right: 0;
   top: 15px;
}    
.left-button {
   position: absolute;
   left: 0;
   top: 15px;
}

http://jsfiddle.net/L9rwhuor/3/

Answer 2

元素的变更顺序

<i class="fa fa-chevron-circle-left" style="float:left; margin-top:15px;"></i>
<i class="fa fa-chevron-circle-right" style="float:right; margin-top:15px"></i>    
<p>test 1</p>
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>