如何让我的图标保持在手风琴标题的中心位置？

Question

我有手风琴。 在我的手风琴右侧，我有一个图标，我想将该图标设置为我的面板标题的中心。

正如你现在所看到的，它有点太接近底层了。

我尝试过使用填充和边距，但到目前为止我没有运气。我不确定我是否以错误的方式使用它们。

HTML

 .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;
}

CSS

SELECT EMPLOYEE_ID,
       LAST_NAME,
       JOB_TITLE,
       MANAGER_ID,
       HIRE_DATE,
       SALARY,
       DEPARTMENT_ID
FROM   (
        SELECT e.EMPLOYEE_ID,
               e.LAST_NAME,
               j.JOB_TITLE,
               e.MANAGER_ID,
               e.HIRE_DATE,
               e.SALARY,
               e.DEPARTMENT_ID,
               ROW_NUMBER() OVER ( PARTITION BY e.JOB_ID ORDER BY e.LAST_NAME ) AS RN
        FROM   HR.EMPLOYEES e
               INNER JOIN
               HR.JOBS j
               ON ( e.JOB_ID = j.JOB_ID )
      )
WHERE RN = 1;

如果需要 - HERE is my Fiddle.

Answer 1

在图标上添加负上边距。

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

JSfiddle

Answer 2

您可以使用position relative来确定图标的显示位置：

.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/

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