HTML: Wie zwei Buttons in der Mitte einer Zelle plazieren?

Gast #3945846
Die unten stehende HTML-Tabelle hat zwei Zellen. Eine Textzelle, die 
sich vertikal und horizontal zentrieren lässt, und eine Zeile mit zwei 
Buttons, bei der dies nicht geht. Der untere Rand ist breiter als der 
obere (siehe Bild.

Wie kann ich die Buttons vertikal und horizontal zentrieren?

1
<table border="1">
2
  <tbody>
3
    <tr>
4
      <td  width="240" height="80" align="center" valign="middle">Switch Output</td>
5
    </tr>
6
    <tr>
7
      <td  width="240" height="80" align="center" valign="middle"><FORM ACTION="/index.htm"><INPUT TYPE="SUBMIT" NAME="LED" VALUE="ON"><INPUT TYPE="SUBMIT" NAME="LED" VALUE="OFF"></form></td>
8
    </tr>
9
  </tbody>
10
</table>
Angehängte Dateien:
> <td  width="240" height="80" align="center" valign="middle">
Alles davon ist HTML der 90er Jahre und sollte nicht mehr verwendet 
werden. Sowas macht man heute mit CSS, das heißt über die style= oder 
class= Attribute.
Alle Attribute von HTML-Elementen die explizit auf die Darstellung des 
Elements Einfluss haben sind völlig veraltet.
Sven B. schrieb:
>> <td  width="240" height="80" align="center" valign="middle">
> Alles davon ist HTML der 90er Jahre und sollte nicht mehr verwendet
> werden. Sowas macht man heute mit CSS

Horizontale zentrierung schon, vertikale jedoch nicht.
margin: auto funktioniert nur horizontal, und text-align: center hat 
kein verticales equivalent (vertikal-aligen ist etwas anderes).

Wenn man prozentuale negative absolute Positionen oder äniches zur 
vertikalen zentrierung mittels css nutzt, und das darüberliegende 
Element zu klein ist, wird das zentriierte element über den oberen rand 
des darüberliegenden kommen.

Die tabellen methode hat diese Probleme nicht, tabellen mit nicht 
tabelenelementen und display table-blabla nachzubauen macht keinen sinn, 
somit sind tabellen zur vertikalen zentrierung am besten geeignet.

Ausserdem: warum sollten tabellen veraltet sein?

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 11 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.