• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Center buttons in grid

a.b_om

Neues Mitglied
Hallo Community,

Ich bin neu in diesem Bereich mit Webentwicklung. Mein Problem ist, dass ich meine Buttons nicht in meinem Grid zentriert sind.
Ich habe es bereits mit "text-align: center;" versucht. Leider hat nichts funktioniert.
Wenn die IDs nicht gut eingestellt sind, dann entschuldige mich. Ich mache zuerst das Grundgerüst.

Mein HTML-Code:

HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Temperatur und Luftfeuchtigkeit</title>
        <link rel="stylesheet" href="design.css">
    </head>
    <body>
        <div class="container">
            <h1 id="1">Text</h1>
            <p id="2">Text</p>
            <p id="3">Text</p>
            <p id="4">Text</p>
            <p id="5">Text</p>
            <button id="6">Text</button>
            <button id="7">Text</button>
            <p id="8">Text</p>
            <textarea id="9"></textarea>
            <p id="10">Text</p>
            <textarea id="11"></textarea>
            <p id="12">Text</p>
            <textarea id="13"></textarea>
            <p id="14">Text</p>
            <textarea id="15"></textarea>
            <button id="16">Text</button>
        </div>
    </body>
</html>

Mein CSS-Code:

CSS:
.container
{
    display: grid;
    grid-template-columns: 33.33% 33.3% 33.3%;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
#1
{
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    text-align: center;
    background: red;
    font-size: 43px;
}
#2
{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    text-align: center;
    background: blue;
    font-size: 30px;
}
#3
{
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    text-align: center;
    background: green;
    font-size: 30px;
}
#4
{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    text-align: center;
    background: brown;
    font-size: 30px;
}
#5
{
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    text-align: center;
    background: yellow;
    font-size: 30px;
}
#6
{
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    text-align: center;
    background: orange;
    font-size: 30px;
    width: 250px;
    height: 50px;
}
#7
{
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    text-align: center;
    background: lightgreen;
    font-size: 30px;
}
#8
{
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    text-align: center;
    background: white;
    font-size: 30px;
}
#9
{
    grid-column: 1 / 2;
    grid-row: 6 / 7;
    text-align: center;
    background: violet;
    font-size: 30px;
}
#10
{
    grid-column: 2 / 3;
    grid-row: 6 / 7;
    text-align: center;
    background: grey;
    font-size: 30px;
}
#11
{
    grid-column: 3 / 4;
    grid-row: 6 / 7;
    text-align: center;
    background: turquoise;
    font-size: 30px;
}
#12
{
    grid-column: 2 / 3;
    grid-row: 7 / 8;
    text-align: center;
    background: darkred;
    font-size: 30px;
}
#13
{
    grid-column: 1 / 2;
    grid-row: 8 / 9;
    text-align: center;
    background: pink;
    font-size: 30px;
}
#14
{
    grid-column: 2 / 3;
    grid-row: 8 / 9;
    text-align: center;
    background: navy;
    font-size: 30px;
}
#15
{
    grid-column: 3 / 4;
    grid-row: 8 / 9;
    text-align: center;
    background: blueviolet;
    font-size: 30px;
}
#16
{
    grid-column: 2 / 3;
    grid-row: 9 / 10;
    text-align: center;
    background: darkcyan;
    font-size: 30px;
}
 
Werbung:
Das ist so eine Sache mit rein numerischen IDs: HTML5 erlaubt es zwar aber wenn CSS ins Spiel kommt, funktioniert es nicht. Das gesamte CSS mit den IDs als Selektor ist unwirksam, nur das für .container greift.

OK. Danke. Die Namen habe ich nicht wirklich so. Ich dachte, dass es so leichter wäre es zu verstehen.

Was die Zentrierung der Texte in den Buttons betrifft, so sind sie bei mir auch ohne weiteres CSS schon zentriert. Aber ich nehme an, Du willst auch die übrigen Texte zentrieren. Das geht am besten mit Flexlayout:

Nein. Ich habe es mal mit 9 Spalten gelöst, damit ich ein Bild schicken kann, wie es schlussendlich aussieht. Diese 9 Spalten sind aber unschön, deshalb möchte ich nur 3 Spalten.
Die Buttons waren, als ich mit 3 Spalten gearbeitet habe, in den roten Rahmen.
5217
Aber danke für deine rasche Antwort.
 
Danke Sempervivum,
Ich weiss nur noch nicht, wie ich es implemetieren soll. Also muss ich den Container löschen und das cbtn einfügen oder verstehe ich es falsch
 
Werbung:
Danke für die Antwort

Leider hat es mir alles nebeneinander auf einer Linie angezeigt.
Beim zweiten Versuch, als ich nur 1 Element in dem SPAN hatte, wurde es schon besser.
Beim dritten Versuch versuchte ich dann 2 Elemente in das 2. SPAN zu schreiben, aber die blieben dann untereinander.
Wissen Sie, wie man die nebeneinander positionieren kann?
 
Werbung:
Ach...
Es klappt nicht.
5218
Das rote ist der Startknopf-Span
Blau = Stopknopf-Span
Grün = Speichernknop-Span


Ich verstehe jetzt nichts mehr. Was kann ich dagegen tun?
 
Ich annuliere die Frage. Es ist geklärt. Ich habe die CBTN auch in die Zellen gewiesen, aber dann habe ich gemerkt, dass die letzten 2 Buttons nicht zentriert waren.
Die Lösung: Das IntelliSense(oder was auch immer) hat ein </span> zu viel eingefügt.
 
Ich habe aber trotzdem noch eine Frage... Kann man eine Frage als sehr hilfreich markieren?
Es ist mein erster Post in diesem Forum.
 
Werbung:
Zurück
Oben