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>