Ein Hintergrundbild durch Tabellenzellen anzeigen?

Question

Ich möchte ein Hintergrundbild auf der schwebenden Leiste am unteren Rand meiner Seite setzen: https://hartbodenreiniger.info/.

Aber leider das Hintergrundbild wird von jeder Tabellenzelle zerschnitt ..

Ich habe bereits versucht, zwei Dinge:

1.Convert der Tabelle divs und stellen Sie das Hintergrundbild. Das funktioniert, aber ich kann den Knopf nicht in der Mitte und in der Mitte des schwebenden Balkens anzeigen. Dies wird benötigt, um eine Tabelle in divs zu konvertieren:

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") 
); 

Wie kann ich den Button zentrieren?

Oder meine zweite Lösung war, ein Overlay Div zu erstellen und dieses Div auf display:absolute; mit einem Hintergrundbild festzulegen. Aber das gleiche Problem. Wie zentriere ich die Schaltfläche und es gibt auch das Problem, dass die Overlay-Wrapper über dem Text ist.

Ich denke Weg 1 ist der bessere Weg, aber wie kann ich das zentrieren? Haben Sie eine Idee oder eine andere Lösung?

Mit freundlichen Grüßen

Answer 1

Sie line-height Eigenschaft nutzen können. Versuchen Sie den Code unten und sehen Sie die Unterschiede

.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>