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:
Mein CSS-Code:
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;
}