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

Iは、内部2つの要素を有するボタンを有しています。スポーツ

のスポーツ

名の

1. 画像は、これらのいずれかは、目に見える1が完全に中央に配置されたCSS値display: none;を持っている場合。

   しかし、フェードイン機能を追加する必要があったため、displayキーワードを使用できませんでした。代わりに私はopacityに行きました。

   この2つの要素が隠されていても、これらの要素が並べて残っていました。

   他の1つが非表示になっている場合、どのようにこれらを中央に配置できますか？

   この画像は、送信イベント中に捕獲されました：

   は、現在の状態は、このようなものです：

   しかし、私はこのようにそれを必要とする：あなたはあなたが望むものを達成することができます

Answer 1

画像の絶対位置。 ？：

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