包含字体的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

添加左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 2

看起来你正在使用图像给内联样式div：style =＆＃34; padding：0px;＆＃34;。这是使用图像删除块中的空间。如果您也将填充0应用于另一个框，则应该能够在两个框中获得相同的结果。

您可以使用：

.button.tiles {
  padding: 0;
}

Answer 3

对于最一致和可靠的absolute定位，请相应调整以下样式：

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