背景画像トラフテーブルセルを表示しますか？

Question

私のページの一番下のフローティングバーに背景画像を設定したい：https://hartbodenreiniger.info/。

しかし、悲しいことに、背景画像は、各テーブルセルでcuttedます。..

私はすでに二つのことを試みた：div要素にテーブル1.Convert

をし、背景画像を設定します。これは動作していますが、フローティングバーの中央と中央にボタンを表示することはできません。これは、表をdivに変換するために必要です。

jQuery('#wpfront-notification-bar > table').replaceWith(jQuery('#wpfront-notification-bar > table').html() 
    .replace(/<tbody/gi, "<div id='table'") 
    .replace(/<tr/gi, "<div") 
    .replace(/<\/tr>/gi, "</div>") 
    .replace(/<td/gi, "<span") 
    .replace(/<\/td>/gi, "</span>") 
    .replace(/<\/tbody/gi, "<\/div") 
); 

どのようにボタンを中央に置くことができますか？

私の2番目の解決方法は、オーバーレイdivを作成し、このdivを背景画像でdisplay:absolute;に設定することでした。しかし、同じ問題。どのようにボタンを中央に置くのですか？また、オーバーレイラッパーがテキストの上にあるという問題があります。

私は方法1が良い方法だと思いますが、どのようにそれを中心にすることができますか？ アイデアやその他の解決策はありますか？

種類は、あなたがline-heightプロパティを使用することができます

Answer 1

について。以下のコードを試してみて、違い

.container{ 
 
    height: 100px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 

 
.the-button{ 
 
    height: 100%; 
 
    line-height: 100px; 
 
} 
 

 
button{ 
 
    height: 30px; 
 
}

<div class="container"> 
 
    <div class="the-button"> 
 
    <button>Hello</button> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div style="height:100%;"> 
 
    <button>Hi</button> 
 
    </div> 
 
</div>