Warum erscheint die Tabelle nicht in der Mitte

[Sigrid]

Hi,

ich möchte den h4-Text und die Tabelle in der Mitte meiner Seite. In dem Beispiel bleibt aber die Tabelle links.

Was ist hier falsch?

[Ryuno-Ki]

Moin Sigrid,

ich möchte den h4-Text und die Tabelle in der Mitte meiner Seite. In dem Beispiel bleibt aber die Tabelle links.

Was ist hier falsch?

Die Tabelle ist kein Inline-Element (damit greift text-align nicht).

.links {
	display: flex;
	flex-direction: column;
	text-align: center;
}

wäre ein möglicher Ansatz.

Gruß,

[MudGuard]

Hi,

ich möchte den h4-Text und die Tabelle in der Mitte meiner Seite. In dem Beispiel bleibt aber die Tabelle links. Was ist hier falsch?

Die Tabelle ist kein Inline-Element (damit greift text-align nicht).

.links {
	display: flex;
	flex-direction: column;
	text-align: center;
}

wäre ein möglicher Ansatz.

margin: auto; für die Tabelle ein anderer …

cu,
Andreas a/k/a MudGuard

[Auge]

Hallo

ich möchte den h4-Text und die Tabelle in der Mitte meiner Seite. In dem Beispiel bleibt aber die Tabelle links.

Was ist hier falsch?

Deine Annahme, dass text-align: center; auf die Positionierung einer Tabelle wirkt. Die Eigenschaft wirkt nur auf den Inhalt, den der Überschrift, aber auch den der Tabelle, wie du siehst, wenn du dem CSS-Code folgendes hinzufügst.

table {
  border: 1px solid;
  width: 32em;
}

Mit …

table {
  margin-inline: auto;
}

… bekommst du auch die Tabelle dazu, sich mittig auszurichten.

Tschö, Auge

[Gunnar Bittersmann]

@@Sigrid

Was ist hier falsch?

Zuallererst: das table-Element. Das sind keine tabellarischen Daten drin.

Und wenn du schon table zum Layouten missbraucht, musst du das kenntlich machen:
<table role="presentation">

🖖 Live long and prosper

[Rolf B]

Hallo Sigrid,

Was ist hier falsch?

Eine Menge.

Wie Gunnar schon sagte: Das ist keine Tabelle. Eine Linkliste ist: eine LISTE.

<div class="links">
  <h4>Besucht auch</h4>
  <ul>
    <li><a href="https://www........../">Seite1</a></li>
    <li><a href="https://www........../">Seite2</a></li>
  </ul>
</div>

Bevor Du HÄ? machst – wir tasten uns da jetzt ran.

Das div möchte vielleicht ein <aside> sein. Oder ist es der <footer> der Seite?

Ob das <h4> richtig ist, hängt von deiner Seitenstruktur ab. Wähle ein h-Element nicht nach seinem Aussehen aus! Überlege Dir auf Grundlage deiner h1...h6 Elemente, wie ein Inhaltsverzeichnis deiner Seite aussähe. Das hilft Dir, die richtige Überschriftenstufe auszuwählen.

Wenn Dir dann für die inhaltlich korrekte h-Stufe die Gestaltung (Schriftgröße, Abstände) nicht gefällt, ändere sie im CSS mit font-* und margin-Eigenschaften ab.

Deine Linkliste, als <ul>-Element, muss nun noch:

• von Listen-Punkten befreit werden (das ist aber optional!) -> list-style
• von dem Leerraum für die List-Punkte befreit werden -> padding
• nur so breit sein wie der längste Link darin -> width:fit-content
• eventuell in der Breite begrenzt werden (max-width), das hängt vom Gesamtaufbau der Seite ab.
• mittig sein: margin-inline: auto

.links {
  text-align: center;   /* Textausrichtung INNERHALB von Elementen */
}
.links ul {
  list-style: none;
  padding: 0;
  width: fit-content;
  margin-inline: auto;
}

margin-inline ist die bessere Variante von margin-left und margin-right. Es hat den Vorteil, dass es auch bei einer abweichenden Schreibrichtung immer noch den Rand beeinflusst, der in Schreibrichtung vor und hinter dem Text ist. Ich find's nicht 100% logisch, aber die CSS Spezifikation spricht hier von „logischen Eigenschaften“ und dementsprechend heißt auch der Artikel über logische Eigenschaften im Self-Wiki so.

Rolf