Hilfe bei Webserver

Hallo,
ich habe ein Sketch wo die Anzeige auf der linken Seite angezeigt wird. Ich möchte es gern in der Mitte der Seite haben. Ich finde einfach keinen Ansatz. Wer kann mir bitte helfen?
Gruß Hicki

WebServer.ino (12.6 KB)

Früher gab's den Tag
mit HTML5 macht man es anders:

Grüße Uwe

Vielen Dank,
aber wo füge ich es ein?

Auf der linken Seite ist ein großes Rechteck mit mit verschiedenen Inhalten. Dieses Rechteck mit Inhalt soll in der Mitte der Seite stehen.
Ich hoffe es besser erklärt zu haben.

Wenn ich nicht ganz daneben liege, HTML5 ist nicht gerade meine Stärke, sollte das eventuell funktionieren:

Oben im Bereich serverStyle die mittlere Zeile (table.center) einfügen:

 "div {min-width: 420px; max-width: 600px; border: ridge; padding: 10px; background-color: SlateGray;}\n"
  "table.center {margin-left: auto; margin-right: auto;}\n"
  "td {padding: 4px; text-align: left;}\n"

unten im Bereich serverOptions den Eintrag in der 3.Zeile ändern in:

 "<table class='center'><tr><th><label for='myColor'>Color</label></th>\n"

Das rückt normalerweise die Tabelle in die Mitte. Da ich derzeit keinen ESP8266 greifbar habe, kann ich leider nicht testen. :frowning:

EDIT: Compiliert nicht mal. Ist das der komplette Sketch? Für welchen Arduino?

Gruß, Jürgen

Das könnte z.B. mit "Auto-Margin" im CSS funktionieren.

Probiere mal folgendes.

Suche in deinem Sketch diese Zeile:

"div {min-width: 420px; max-width: 600px; border: ridge; padding: 10px; background-color: SlateGray;}\n"

Dieses Element kann man zentrieren indem du folgendes ergänzt:

margin: 0 auto;

So, dass die Zeile dann z.B. so aussieht:

"div {min-width: 420px; max-width: 600px; border: ridge; padding: 10px; background-color: SlateGray; margin: 0 auto;}\n"

uxomm:
Das könnte z.B. mit "Auto-Margin" im CSS funktionieren.

Probiere mal folgendes.

Suche in deinem Sketch diese Zeile:

"div {min-width: 420px; max-width: 600px; border: ridge; padding: 10px; background-color: SlateGray;}\n"

Dieses Element kann man zentrieren indem du folgendes ergänzt:

margin: 0 auto;

So, dass die Zeile dann z.B. so aussieht:

"div {min-width: 420px; max-width: 600px; border: ridge; padding: 10px; background-color: SlateGray; margin: 0 auto;}\n"

Hallo,
genau das ware es. Vielen Dank an Alle für die Hilfe.
LG Hicki

Super, dass es geklappt hat!