Comment puis-je faire en sorte que mon icône reste au centre de mon en-tête d'accordéon?

enter image description here

J'ai un accordéon. À la droite de mon accordéon, j'ai une icône et je veux que cette icône reste dans le centre de mon en-tête de panneau.

Comme vous pouvez le voir maintenant, c'est un peu trop près du fond.

J'ai essayé d'utiliser le rembourrage, et la marge, mais jusqu'ici je n'ai pas eu de chance. Je ne suis pas sûr si je les ai utilisés dans le mauvais sens.


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">
          

PRE-REQUISITE(S) FOR ALL SKILLS IN EXERCISE HIDE DETAILS

 
        </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">
             SOLVING EQUATIONS BY ADDITION OR SUBSTRACTION 

<div class="sk-p-dash"> WATCH VIDEO

REVIEW LESSON </div> </div> <div class="col-sm-6 col-md-6 col-lg-6"> GRAPHING INEQUALITIES IN ONE VARIABLE

<div class="sk-p-dash"> WATCH VIDEO

REVIEW LESSON </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;
}

If needed - HERE is my Fiddle.

0

3 Réponses

Ajoutez une marge supérieure négative à votre icône.

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

JSfiddle

0
ajouté
Cela fonctionne très bien. Puis-je demander comment savez-vous -5 est le nombre magique? Avez-vous joué avec ça jusqu'à ce qu'ils soient beaux?
ajouté l'auteur kyo, source
C'est suffisant. Merci quand même.
ajouté l'auteur kyo, source
Oui, j'ai joué autour d'elle :)
ajouté l'auteur Manoj Kumar, source
Bienvenue 开发 人员 :)
ajouté l'auteur Manoj Kumar, source

Vous pouvez utiliser la position relative pour déterminer où l'icône doit être affichée:

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

Peut-être que vous voulez position: absolute , cela fonctionne bien avec des titres plus longs:

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

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

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

Remarque: Redimensionnez la fenêtre pour voir comment cela fonctionne.

0
ajouté