mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 18.04.2024 13:24 Benutzername: Passwort: Auto-Login

Thema: CSS: vertical-align wird ignoriert? vom 19.06.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> CSS: vertical-align wird ignoriert?
Autor Nachricht
qualidat
Threadersteller

Dabei seit: 14.09.2006
Ort: Eichwalde bei Berlin
Alter: 63
Geschlecht: Männlich
Verfasst Do 19.06.2014 20:42
Titel

CSS: vertical-align wird ignoriert?

 Antworten mit Zitat Zum Seitenanfang
Bei einer CSS-Übung ist mir dieses Verhalten von Firefox unangenehm aufgefallen: "verical-align: middle;" wird im CSS ignoriert, obwohl "display: table-cell;" gesetzt ist. Warum? (der Refresh-Tag ist nur zur einfacheren Beobachtung während des Schreibens noch drin).

Code:

<html>
    <head>
        <meta http-equiv="refresh" content="3" />
        <style type='text/css'>
            #logdiv
            {
                display: table-cell;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -150pt;
                margin-left: -100pt;
                padding: 0px;
                width: 300pt;
                height: 200pt;
                border: solid;
                border-width: 1pt;
                border-radius: 10pt;
                border-color: #ffffff;
                background-color: #999999;
                text-align: center;
                vertical-align: bottom;
            }
        </style>
    </head>
    <body bgcolor='#000000'>
        <div id='logdiv' name='logdiv'>
            <form id='login' name='login' action='checkit.php'>
                <br>please log in:<br><br>
                username:<br>
                <input size='30' type='text' id='uname' name='uname'><br>
                password:<br>
                <input size='30' type='password' id='passwd' name='passwd'><br><br>
                <input type='submit' value='login'>
            </form>
        </div>
    </body>
</html>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Do 19.06.2014 21:09
Titel

Antworten mit Zitat Zum Seitenanfang
Warum nicht http://jsfiddle.net/Hgm53/ ?
  View user's profile Private Nachricht senden
Anzeige
Anzeige
qualidat
Threadersteller

Dabei seit: 14.09.2006
Ort: Eichwalde bei Berlin
Alter: 63
Geschlecht: Männlich
Verfasst Do 19.06.2014 21:20
Titel

Antworten mit Zitat Zum Seitenanfang
pantonine hat geschrieben:
Warum nicht http://jsfiddle.net/Hgm53/ ?


Hmm ... naja, dann klebt es unten - als Alternative sozusagen - Danke dass du dir die Mühe gemacht hast.

Aber warum funktioniert das mit dem vertical-align nicht? Ich habe im Web keinen Hinweis darauf gefunden, dass FF da irgend eine Ausname macht *Schnief*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Newone.

Dabei seit: 11.03.2014
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 19.06.2014 21:59
Titel

Antworten mit Zitat Zum Seitenanfang
Machs doch so:
http://codepen.io/anon/pen/yCjGz

Und Firefox macht da keine Ausnahme, dein Code ist falsch.
So geht's:
http://codepen.io/anon/pen/dpuhm
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Do 19.06.2014 22:37
Titel

Antworten mit Zitat Zum Seitenanfang
qualidat hat geschrieben:
Hmm ... naja, dann klebt es unten


Zitat:
vertical-align: bottom;
*zwinker*
  View user's profile Private Nachricht senden
qualidat
Threadersteller

Dabei seit: 14.09.2006
Ort: Eichwalde bei Berlin
Alter: 63
Geschlecht: Männlich
Verfasst Fr 20.06.2014 07:07
Titel

Antworten mit Zitat Zum Seitenanfang
Ok, ich habe es (glaube ich) verstanden: Man kann "vertical-align" nicht allgemein als Eigenschaft des Div verwenden, sondern muss z.B. den enthaltenen Form-Bereich damit ausrichten. Also sind "text-align" und "vertical-align" NICHT gleichwertig, denn Ersteres zeigt durchaus Wirkung? Klingt ein wenig "inkonsequent" von Seiten der Entwickler, oder gibts dafür eine nachvollziehbare Erklärung?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Morgo

Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: Männlich
Verfasst Fr 20.06.2014 11:14
Titel

Antworten mit Zitat Zum Seitenanfang
Hat nichts mit Inkonsequenz zu tun, text-align ist eine Eigenschaft auf einem Blocklevel-Element und definiert den darin enthaltenen Textfluss, vertical-align ist eine Eigenschaft auf Inline-Elementen (oder in diesem Fall einer Tabellenzelle) und definiert eigentlich die vertikale Position auf der Zeile.
  View user's profile Private Nachricht senden
 
Ähnliche Themen <col>tag vertical-align zuweisen?
[CSS] vertical-align: middle
[CSS] 1.) vertical-align 2.) position
[CSS] vertical-align XHTML oder auch: bin ich doof?
CSS – vertical-align funktioniert nicht im Menü(gelöst)
DIV align=center in CSS
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB