總是在合適的位置顯示懸停文字

Question

我想對文本區做出懸停效果：當鼠標移過該區域時，我想在中心顯示文字Available in Apple Store。這裏是HTML代碼：

<section class="apps"> 
    <div class="container"> 
    <div class="row"> 
     <div class="media"> 
     <div class="app"> 
      <div class="content"> 
      ... 
      </div><!-- content --> 
     </div><!-- app --> 
     <div class="media__body"> 
      <br> 
      <a class="btn btn-lg btn-theme" target="_blank" href="www.google.fr">Available in Apple Store</a> 
     </div> 
     </div><!-- media --> 
    </div><!-- row --> 
    </div><!-- contaniner --> 
</section> 

這裏是CSS：JSBin。正如你所看到的，屏幕的寬度不同，文字Available in Apple Store並不總是處於良好的位置;當屏幕非常窄時，只能顯示一部分文字（我希望它被包裹）。

有誰知道如何修改這個？

PS：是否可以使按鈕始終垂直垂直居中？

Answer 1

如果我理解正確的問題，你想要的.btn爲中心和包裹，如果它是太長？

如果是這種情況，您可以將此代碼添加到您的CSS。

.apps .media__body a.btn { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    white-space: pre-wrap; 
    background: rgba(0,0,0,0.4); 
} 

這裏有一個演示：

.apps { 
 
    background-color: #fff; 
 
    padding: 80px 0; 
 
    font-weight: 300; 
 
} 
 
.apps .app { 
 
    background: #fff; 
 
    -webkit-background-clip: padding-box; 
 
    border-top: 1px solid #75C181; 
 
    border-left: 1px solid #75C181; 
 
    border-right: 1px solid #75C181; 
 
    border-bottom: 1px solid #75C181; 
 
} 
 
.apps .app .content { 
 
    padding: 10px 15px; 
 
} 
 
.apps .media { 
 
    display: inline-block; 
 
    position: relative; 
 
    vertical-align: top; 
 
    margin-top: 30px; 
 
} 
 
.apps .media__body { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    bottom: 0; 
 
    color: white; 
 
    font-size: 1em; 
 
    left: 0; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 0; 
 
    right: 0; 
 
    -webkit-transition: 0.6s; 
 
    transition: 0.6s; 
 
} 
 
.apps .media__body:hover { 
 
    opacity: 1; 
 
    border-radius: 8px 8px 8px 8px; 
 
} 
 
.apps .media__body:after, 
 
.apps .media__body:before { 
 
    bottom: 1em; 
 
    left: 1em; 
 
    opacity: 0; 
 
    position: absolute; 
 
    right: 1em; 
 
    top: 1em; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    -webkit-transition: 0.6s 0.2s; 
 
    transition: 0.6s 0.2s; 
 
} 
 
.apps .media__body:before { 
 
    border-bottom: none; 
 
    border-top: none; 
 
    left: 2em; 
 
    right: 2em; 
 
} 
 
.apps .media__body:after { 
 
    border-left: none; 
 
    border-right: none; 
 
    bottom: 2em; 
 
    top: 2em; 
 
} 
 
.apps .media__body:hover:after, 
 
.apps .media__body:hover:before { 
 
    -webkit-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    transform: scale(1); 
 
    opacity: 1; 
 
} 
 
.apps .media__body h2 { 
 
    margin-top: 0; 
 
} 
 
.apps .media__body p { 
 
    margin-bottom: 1.5em; 
 
} 
 
.apps .media__body a.btn { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    white-space: pre-wrap; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    color: #fff; 
 
} 
 
.apps .btn-theme { 
 
    background: transparent; 
 
    border: 1px solid #fff; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section class="apps"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="media"> 
 
     <div class="app"> 
 
      <div class="content"> 
 
      Proin scelerisque magna ac eros aliquam aliquam id in lacus. Morbi quam tortor, consequat at orci non, vulputate volutpat libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sagittis laoreet urna eu ornare. 
 
      Aenean tempor, leo vel eleifend porttitor. Aenean tempor, leo vel eleifend porttitor, nibh libero ultricies est. 
 
      </div> 
 
      <!-- content --> 
 
     </div> 
 
     <!-- app --> 
 
     <div class="media__body"> 
 
      <a class="btn btn-lg btn-theme" target="_blank" href="www.google.fr">Available in Apple Store</a> 
 
     </div> 
 
     </div> 
 
     <!-- media --> 
 
    </div> 
 
    <!-- row --> 
 
    </div> 
 
    <!-- contaniner --> 
 
</section>

希望這有助於。

編輯

.apps .media__body已經得到了一些填充，去除它會在所有尺寸的工作。

Answer 2

此行CSS添加到您的按鈕：

.btn { 
    white-space: pre-wrap 
} 

這可以確保超過界限時，該文本被包裹。

Answer 3

這是相當容易實現這一點，只需使用以下行您btn-theme類：

position:relative; 
top:50%; 
transform:translateY(-50%);