divを含むフォントが含まれている場合は背景イメージがあり、それ以外の場合は境界が外れます

Question

イメージの背景を持つボタンの下部に透明なdivを作成しようとしています。このdivには、整列させるべきテキストが含まれます。テキストは長さが異なるので、テキストを格納するためにdivが大きくなるはずです。

私のアプローチは働いていない - それがこの結果を生産ます：

これらのボタンは、同じクラスを持っています。唯一の違いは、画像のないものが動的に作成されることです。

 <button class="tiles" style="padding: 0px; background: url(../static/bilder/Multifunktionstür.jpg); background-size: cover; background-repeat: no-repeat" v-if="selectedCategory==''" > 
      <div class="button-label flex-container"> 
       <h3>MULTIFUNKTIONSTÜREN</h3> 
      </div> 
     </button>    
     <button v-for="category in categories" class="tiles" v-if="selectedCategory==''" @click="selectCategory(category)"> 
      <div class="button-label flex-container"> 
      <h3>{{ category.name.toUpperCase() }}</h3> 
      </div> 

     </button> 



.flex-container { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
    justify-content: center; 


} 

.button-label { 
    text-align: center; 
    background-color: rgba(255, 255, 255, 0.8); 
    position: absolute; 
    width: 100%; 
    height: 20%; 
    bottom: 0px; 
} 

私が間違っている可能性のあることについてのアイデアはありますか？ありがとう。

Answer 1

をチェックし、あなたがイメージにインラインスタイルにdiv要素を与えているように思える：スタイルは= "パディング：0PX;"。これは、画像内のブロック内のスペースを削除しています。パディング0を他のボックスにも適用すると、両方のボックスで同じ結果が得られるはずです。あなたが使用することができます

：

.button.tiles { 
    padding: 0; 
} 

Answer 2

は左0PXを追加し、

`.button-label { 
    text-align: center; 
    background-color: rgba(255, 255, 255, 0.8); 
    position: absolute; 
    width: 100%; 
    height: 20%; 
    bottom: 0px; 
    left:0px; 
}` 

Answer 3

最も一貫性と信頼性absolute位置決めのためにはそれに応じて次のスタイルを調整します

.button-label { 
    left: 0; 
    right: 0; 
    width: auto; 
}