居中這兩個元素，如「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>

我有具有內2種元素的按鈕。

1. 運動

的運動

名稱的圖像當任一這些具有的CSS值display: none;可見一個對準完美中心。

但我需要添加淡入淡出功能，所以我無法使用display關鍵字。相反，我去了opacity。

這導致這兩個元素即使一個隱藏並排保持並排。

如何隱藏這些隱藏的對象？

目前的狀態是這樣的：

這個圖片的傳輸事件期間捕獲

但我需要這樣的：

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>