Zentrieren Sie beide Elemente wie "display: none;"

Question

.Button_Image { 
 
      width: 40px; 
 

 
      -webkit-transition: opacity 0.5s linear; 
 
      -moz-transition: opacity 0.5s linear; 
 
      -ms-transition: opacity 0.5s linear; 
 
      -o-transition: opacity 0.5s linear; 
 
      opacity: 1; 
 
     } 
 

 
     .Button:hover .Button_Image { 
 
      opacity: 0; 
 
     } 
 

 
     .Button_Name { 
 
      font-size: 18px; 
 
      color: black; 
 
      line-height: 40px; 
 

 
      -webkit-transition: opacity 0.5s linear; 
 
      -moz-transition: opacity 0.5s linear; 
 
      -ms-transition: opacity 0.5s linear; 
 
      -o-transition: opacity 0.5s linear; 
 
      opacity: 0; 
 
     } 
 

 
     .Button:hover .Button_Name { 
 
      opacity: 1; 
 
     }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<a href="#" class="Button btn btn-success btn-block"> 
 
    <img class="Button_Image" src="https://i.stack.imgur.com/hiAkR.png"> 
 
    <span class="Button_Name">Football</span> 
 
</a>

Ich habe eine Schaltfläche, die im Inneren 2 Elemente aufweist.

1. Bild eines Sport
2. Namen des Sports

Wenn entweder von diesen haben die CSS Wert display: none; die sichtbare ausgerichtet ist perfekt zu zentrieren.

Aber ich musste eine Fade-In-Out-Funktionalität hinzufügen, so konnte ich display Schlüsselwort nicht verwenden. Stattdessen ging ich für opacity.

Das Ergebnis dieser zwei Elemente nebeneinander zu bleiben, auch wenn man versteckt ist.

Wie kann ich diese zentrieren, wenn der andere versteckt ist?

Der aktuelle Zustand ist wie folgt::

Aber ich brauche es wie folgt aus:

Answer 1

Sie erreichen können, was mit Ihnen wollen

Dieses Bild während der Übertragung Ereignis erfasst wurde absolute Positionierung des Bildes. Ist so etwas wie das, was Sie wollen ?:

.sportbtn { 
 
    border: green 1px solid; 
 
    width: 150px; 
 
    height: 40px; 
 
    position: relative; 
 
    line-height: 40px; 
 
} 
 

 
.sportimg { 
 
    /* centered in button */ 
 
    width: 30px; 
 
    transition: left 1s, margin-left 1s; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -15px; /* half the image width */ 
 
    margin-top: 5px; 
 
} 
 

 
.sportname { 
 
    transition: opacity 1s; 
 
    opacity: 0; 
 
    margin-left: 40px; 
 
} 
 

 
.sportbtn:hover .sportname { 
 
    opacity: 1; 
 
} 
 

 
.sportbtn:hover .sportimg { 
 
    margin-left: 0px; 
 
    left: 5px; 
 
}

<div class="sportbtn"> 
 
<img class="sportimg" src="https://d30y9cdsu7xlg0.cloudfront.net/png/23344-200.png" /> 
 
<span class="sportname">Football</span> 
 
</div>