如何让我的图标留在手风琴头的中央？

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/

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