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

Herbert Gast 31.12.2014 11:34 #3945846

Lesenswert?

•

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?

<table border="1">
  <tbody>
      <td  width="240" height="80" align="center" valign="middle">Switch Output</td>
    </tr>
      <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>
    </tr>
  </tbody>
</table>

Angehängte Dateien:

B2.gif (2,5 KB)

Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden

Joachim D. (scheppertreiber) (Firma: JDCC) 31.12.2014 11:37 #3945849

Lesenswert?

•

▲
▼

Herbert schrieb:
> <td  width="240" height="80" align="center" valign="middle">

style='text-align:center;'

in das td einsetzen. Am Besten macht man das ohne table ...

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Herbert Gast 31.12.2014 11:43 #3945861

Lesenswert?

•

▲
▼

Joachim Drechsel schrieb:
> Herbert schrieb:
>> <td  width="240" height="80" align="center" valign="middle">
>
> style='text-align:center;'

Funktioniert nicht. Die Buttons kleben oben am Rand der Zelle.

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Joachim D. (scheppertreiber) (Firma: JDCC) 31.12.2014 11:46 #3945862

Lesenswert?

•

▲
▼

Da steht alles drin: http://de.selfhtml.org/

Stichwort CSS, dort margin:auto etc.

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Sven B. (scummos) 31.12.2014 12:34 #3945910

Lesenswert?

•

▲
▼

> <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.

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Daniel A. (daniel-a) 08.01.2015 17:52 #3957622

Lesenswert?

•

▲
▼

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 Zitieren Bearbeiten Löschen Beitrag melden

Sven B. (scummos) 08.01.2015 18:02 #3957643

Lesenswert?

•

▲
▼

Da das ein td ist, funktioniert vertical-align doch, oder?
Tabellen sind natürlich nicht veraltet, ich meinte die ganzen Attribute.

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren