HTML/CSS Seite an Bildschirm Größe des jeweiligen Geräts anpassen?

Ich hab ein Bild zentriert,(auf jedem Bildschirm) allerdings schaffe ich es nicht, Art „Boxen“ zu zentrieren... bin nh absolute Laie und kein „Nerd“ der sich mit sowas auskennt, hab einfach Info als 4. Hauptfach genommen... . Naja, meine Frage ist einfach wie ich diese Boxen zentrieren kann, ich hab jetzt bestimmt 2 Stunden lang im Internet gesucht und absolut nichts gefunden. Vermutlich stell ich mich einfach dumm an.🥲

Ich hoffe ihr versteht meine Frage weil ich bin dumm und kann das alles nicht und jaaa danke

HTML

CSS

Beispiel Box

Comments

[PixelManuel]

Soll der Text in den Boxen horizontal und/oder vertikal zentriert sein?

[PeterDiePommes]

Vertikal :)

Answer 1

[regex9]

Einiges, was du da verwendest, solltest du besser rauswerfen und dann auch direkt wieder vergessen. Dazu gehören der font-Tag und das align-Attribut. Beide gehören nicht zum HTML5-Standard.

Das Bild kannst du mit text-align zentrieren:

<div style="text-align: center"><!-- img ... --></div>

und die Schrift lässt sich ebenfalls via CSS manipulieren.

<span style="font-size:24px;color:red">Red big text</span>

Die beiden Snippets zeigen eine Lösung mit Inline-Style. Noch besser wäre aber eine Separation des CSS. Lies dazu hier und hier.

Die Positionierung der Boxen lässt sich viel leichter lösen. Mit einer absoluten Positionierung hingegen schaffst du dir eher Probleme.

Beispiel:

Im HTML wird ein Container angelegt, der die Boxen beinhaltet.

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

Im CSS wird dann ein Flexboxlayout eingesetzt, um die Boxen nebeneinander zu positionieren und horizontal zu zentrieren.

.container {
  display: flex;
  justify-content: center;
}

.container > div {
  border: 1px solid;
  height: 100px;
  width: 100px;
}

Mit einem padding könnte man zusätzlich einen Innenabstand nach oben und unten für den Container schaffen. Die Elemente wären vertikal in diesem zentriert.

.container {
  /* ... */
  padding: 50px 0;
}

Oder man nutzt align-items:

.container {
  /* ... */
  align-items: center;
  height: 500px;
}

wobei der Container natürlich schon auch eine entsprechende Höhe haben müsste, damit der Effekt sichtbar wird. Im obigen Beispiel habe ich ihn daher zur Demonstration konkret gesetzt.

Answer 2

[PixelManuel]

Für die Box:

display: flex;
align-items: center;

Falls horizontale Zentrierung gewünscht noch zusätzlich

justify-content: center;

Woher ich das weiß: Berufserfahrung – Game Developer mit Lehrerfahrung

Answer 3

[FaTech]

Wonach du googeln solltest: CSS Flex, CSS Grid, CSS Media Queries, CSS Größeneinheiten wie %

Comments

[PeterDiePommes]

Mal gucken, danke auf jeden Fall