Text und icon im Button zentrieren

[TecMec]

Hallo Zusammen,

ich bins schon wieder. Mein Spiel ist auch jetzt fast fertig.
Bei einer Sache werde ich aber einfach nicht fündig.

Bei den Buttons links und unten wird mir der Text nicht zentriert im Button angezeigt.
Sämtliche Versuche mit Ausrichtungen sind gescheitert.

Habt Ihr da wieder mal nen Tip für mich?

Code:

HTML (Ausschnitt)
<main>
    <b id="btHinweis0" class="clbtHinweis" style="visibility: hidden;" >Hinweis 1</b>
    <b id="btHinweis1" class="clbtHinweis" style="visibility: hidden;" >Hinweis 2</b>
    <b id="btHinweis2" class="clbtHinweis" style="visibility: hidden;" >Hinweis 3</b>
    <b id="btHinweis3" class="clbtHinweis" style="visibility: hidden;" >Hinweis 4</b>
</main>
<footerr>
    <button onclick="Start()" class="clnavi" id="clbtStart" style="visibility: inline;"><img class="navicon" src="bhome.jpg" alt="Weiter">Start</button>
    <button onclick="nLebensraum()" class="clnavi" id="idnLebensraum" style="visibility: inline;"><img class="navicon" src="bweiter.jpg" alt="nLebensraum">näxter Lebensraum</button>
    <button onclick="Hinweis()" class="clnavi" id="clbtHinweis" style="visibility: inline;"><img class="navicon" src="bweiter.jpg" alt="Hinweise">Noch mehr Hinweise? Weiter drücken</button>
 

Code:

CSS:
body{
    display: grid;
    gap: 0em;
    margin: 0em;
    font-family: sans-serif;
    background-size:contain;
    background-repeat: no-repeat;
}

body{
    grid-template-columns: 350px 1150px;
    grid-template-rows: 740px 140px;
    }


footerl {
    grid-column: 1;
    background: #6d8dac96;
    float: right;
    clear: right;
    padding: 0px;
   
}

footerr {
    grid-column: 2;
    background: #3372b196;
    float: right;
    clear: right;
    padding: 0px;
    justify-content:flex-end;
}

main {
    background: #db7e3b91;
}

aside {
    background: #0f16001c;
    justify-self: left;
}

.clbtHinweis{
    display: inline-block;
    background-color: rgba(5, 58, 5, 0.473);
    border: none;
    border-radius: 15px;
    color: white;
    padding: 15px 35px;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
    margin: 100px;
    width: 250px;
}

.Viecherbutton{
    background-color: rgba(5, 58, 5, 0.473);
    width: 350px;
    height: 80px;
    border: none;
    margin-top: 50px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
    text-decoration: none;
    font-size: 30px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-self: center;
}

.icon{
    height: 55px;
    display: inline-flexbox;
    background: transparent;
    align-self: center;
}

.navicon{
    height: 55px;
    display: inline-flexbox;
    background: transparent;
}


.clnavi{
    background-color: grey;
    border: none;
    color: white;
    text-decoration: none;
    font-size: 15px;
    cursor: pointer;
    width: 300px;
    padding-top: 20px;
    align-self: center;
}
#idStatustext{
    float: left;
    color: white;
    padding: 15px 35px;
    width: 280px;
}

[Sempervivum]

Ich nehme an, Du willst die Bilder und die Texte in den Buttons vertikal zentrieren? Dann ist Flexlayout dein Freund:

Code:

button {
    display: inline-flex;
    align-items: center;
}

An deinem HTML und CSS ist darüber hinaus noch vieles, sagen wir mal, verbesserungsfähig:
Vergiss float und benutze statt dessen konsequent Flex und Grid.
Ich nehme an mit footerl und footerr meinst Du linken und rechten Footer? Erst Mal gibt es diese HTML-Elemente nicht. Du kannst zwar selbst welche definieren, aber das ist in den meisten Fällen nicht nötig. Eine Möglichkeit:

Code:

<footer class="left">

und

Code:

<footer class="right">

. Oder nur ein footer und darin zwei Elemente für links und rechts.

[TecMec]

Hallo Sempervivum,

Danke für Deine Antwort.
Entschuldige, ich habe nicht den ganzen html-code gepostet. Jetzt aber.

Das ganze ist ein Spiel für eine Art sagen wir mal Museum.
Es wird also immer auf dem gleichen PC im gleichen Browser im gleichen Format laufen.

Ich wollte es selber probieren und muss sagen es läuft jetzt echt gut.

Für das Zentrieren in den Buttons habe ich jetzt (so weit ich das nachvollziehen kann) für den Button selbst und für das icon im Button eine klasse erstellt (siehe Html).
Im CSS habe ich das dann um ein paar Zeilen ergänzt und es sieht jetzt super aus.

Deinen Tip mit float werde ich mal versuchen einzuarbeiten.

Vielleicht kannst Du über den code nochmal drüberschauen.

Code:

html
<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8">
    <title>Ratespiel</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
 
</head>

<body
id="hgbild" style="background-image:url(hintergrund.jpg)">
   
    <aside>
        <button onclick="antwort(this)" class="Viecherbutton" id="viech1"> <img class="icon" src="sumpfschrecke.png" alt="sumpfschrecke">Sumpfschrecke</button>
        <button onclick="antwort(this)" class="Viecherbutton" id="viech2"> <img class="icon" src="schmetterling.png" alt="sumpfschrecke">Dukatenfalter</button>
        <button onclick="antwort(this)" class="Viecherbutton" id="viech3"> <img class="icon" src="schmetterling.png" alt="sumpfschrecke">Schönbär</button>
        <button onclick="antwort(this)" class="Viecherbutton" id="viech4"> <img class="icon" src="libelle.png" alt="sumpfschrecke">Große Moosjungfer</button>
        <button onclick="antwort(this)" class="Viecherbutton" id="viech5"> <img class="icon" src="schmetterling.png" alt="sumpfschrecke">Goldener Scheckenfalter</button>
    </aside>

<main>
    <div class="Hinweise">
    <b id="btHinweis0" class="clbtHinweis" style="visibility: hidden;" >Hinweis 1</b>
    <b id="btHinweis1" class="clbtHinweis" style="visibility: hidden;" >Hinweis 2</b>
    <b id="btHinweis2" class="clbtHinweis" style="visibility: hidden;" >Hinweis 3</b>
    <b id="btHinweis3" class="clbtHinweis" style="visibility: hidden;" >Hinweis 4</b>
    </div>
</main>

</body>

<footerl>
    <b id="idStatustext">Wer lebt in diesem Lebensraum? Auswählen per Fingertipp. Aber: nach drei Fehlern ist Schluss</b>
</footerl>

<footerr>
    <button onclick="Start()" class="clnavi" id="clbtStart" style="visibility: inline;"><img class="navicon" src="bhome.jpg" alt="Weiter">Start</button>
    <button onclick="nLebensraum()" class="clnavi" id="idnLebensraum" style="visibility: hidden;"><img class="navicon" src="bweiter.jpg" alt="Weiter">näxter Lebensraum</button>
    <button onclick="Hinweis()" class="clnavi" id="clbtHinweis" style="visibility: hidden;"><img class="navicon" src="bweiter.jpg" alt="Hinweise">Noch mehr Hinweise? Weiter drücken</button>
   
</footerr>
</html>

Code:

css
body{
    display: grid;
    gap: 0em;
    margin: 0em;
    font-family: sans-serif;
    background-size:contain;
    background-repeat: no-repeat;
}

body{
    grid-template-columns: 350px 1150px;
    grid-template-rows: 740px 140px;
    }


footerl {
    grid-column: 1;
    float: right;
    clear: right;
    padding: 0px;
   
}

footerr {
    grid-column: 2;
    float: right;
    clear: right;
    padding: 0px;
    justify-content:flex-end;
}

main {
    background: transparent;
}

aside {
    background: #0f16001c;
    justify-self: left;
}

.clbtHinweis{
    display: inline-block;
    background-color: rgba(5, 58, 5, 0.473);
    border: none;
    border-radius: 15px;
    color: white;
    padding: 15px 35px;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
    margin: 100px;
    width: 250px;
}

.Viecherbutton{
    background-color: rgba(5, 58, 5, 0.473);
    width: 350px;
    height: 80px;
    border: none;
    margin-top: 50px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
    text-decoration: none;
    font-size: 30px;
    text-align: left;
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: row;
}

.icon{
    height: 55px;
    display: inline-flexbox;
    align-self: center;
    padding-right: 10px;
    float: right;
}

.navicon{
    height: 75px;
    display: inline-flexbox;
    align-self: center;
    float:left;
    padding-left: 10px;
}


.clnavi{
    background-color: transparent;
    border: none;
    color: white;
    text-decoration: none;
    font-size: 15px;
    cursor: pointer;
    width: 300px;
    height: 40px;
    margin-right: 75px;
    margin-top: 25px;
    float: right;
    text-align: left;
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
    padding: 0 0;
   
   
}
#idStatustext{
    float: left;
    color: white;
    margin-top: 25px;
    padding: 0px 35px;
    width: 280px;
}