如何讓我的圖標留在手風琴頭的中央？

Question

我有一個手風琴。 在我的手風琴右側，我有一個圖標，我想設置該圖標以保留在面板標題的中心中。

正如您現在所看到的那樣，它離底部太近了。

我試過使用填充和邊距，但到目前爲止我沒有運氣。我不確定我是否以錯誤的方式使用了它們。

---

HTML

<div class="row sk-p"> 
    <div class="col-xs-12 col-sm-12 col-md-12"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 

      PRE-REQUISITE(S) FOR ALL SKILLS IN EXERCISE 

      <span data-toggle="collapse" data-parent="#accordion" href="#sk-p-r" class="hide-details-sk-p pull-right"> 

       <span class="hide-details-txt-sk-p-r">HIDE DETAILS</span> 
       <img width="20px" class="icon-sk-p-r" src="http://s4.postimg.org/jd95wuzd5/incorrect.png"> 
      </span> 

      </h4> 
     </div> 
     <div id="sk-p-r" class="panel-collapse collapse"> 
      <div class="panel-body"> 


      <div class="col-sm-6 col-md-6 col-lg-6"> 
      <span>SOLVING EQUATIONS BY ADDITION OR SUBSTRACTION </span><br><br> 
      <div class="sk-p-dash"> 
       <img width="20px" class="icon-sk-p-r" src="http://s8.postimg.org/n1o8p0tsx/review_video.png"> 
       <span>WATCH VIDEO</span><br><br> 
       <img width="20px" class="icon-sk-p-r" src="http://s4.postimg.org/n8ugz0v49/review_pdf.png"> 
       <span>REVIEW LESSON</span> 
      </div> 

      </div> 


      <div class="col-sm-6 col-md-6 col-lg-6"> 
      <span>GRAPHING INEQUALITIES IN ONE VARIABLE </span><br><br> 
      <div class="sk-p-dash"> 
       <img width="20px" class="icon-sk-p-r" src="http://s8.postimg.org/n1o8p0tsx/review_video.png"> 
       <span>WATCH VIDEO</span><br><br> 
       <img width="20px" class="icon-sk-p-r" src="http://s4.postimg.org/n8ugz0v49/review_pdf.png"> 
       <span>REVIEW LESSON</span> 
      </div> 

      </div> 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 
</div> 

---

CSS

.sk-p-dash{ 
    padding-left: 25px; 

} 

.panel { 
    border-radius: 0px !important; 
} 

.sk-p { 
    margin-right: 16px; 
    margin-left: 16px; 
} 

.panel-title, .panel-body { 
    font-size: 10px; 
} 

.hide-details-sk-p { 
    font-size: 9px; 
    padding-right: 5px; 
} 

.hide-details-txt-sk-p-r{ 
    padding-right: 12px; 
} 

.row{ 
    padding-top:100px; 
} 

---

如果需要的話 - HERE is my Fiddle.

Answer 1

添加正例如您的圖標的頂部邊距。

.hide-details-sk-p .icon-sk-p-r { 
    margin-top: -5px; 
} 

JSfiddle

Answer 2

你可以用相對位置來確定應顯示的圖標：

.hide-details-sk-p .icon-sk-p-r { 
    position: relative; 
    top: -5px; 
    left: 13px; 
} 

Answer 3

也許你想position: absolute，這項工作也不錯較長的標題：

.panel-title{ 
    padding-right: 100px; 
} 

.hide-details-sk-p { 
    position: absolute; 
    right: 20px; 
    top: 7px; 
} 

FIDDLE：https://jsfiddle.net/lmgonzalves/4s6mLy6b/3/

注意：調整窗口大小以查看其工作方式。