Label vertikal verschieben HTML

OP #6133803
Hey, ich bin gerade dabei eine Log-in Seite für eine Website zu 
erstellen. Allerdings möchte ich, dass das Label und er Log-In Text zu 
hoch oben sind. Da ich auch im Internet nichts nützliches finden konnte, 
wollte ich mal schauen ob heir jemand einen guten Rat hat. Das ganze 
Label sollte entweder mittig oder um eine gewisse Länge nach unten 
versetzt werden. Das gleiche gilt auch für den Log-in Text. Danke für 
die Hilfe
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <style>
5
        label {
6
            display: block;
7
            font: .9rem 'Fira Sans', sans-serif;
8
        }
9

10
        input[type='submit'],
11
        label {
12
            margin-top: 1rem;
13
        }
14
        .login{
15
            width: 80rem;
16
            height: 40rem;
17
            margin: auto auto;
18
            box-shadow: 0 0 10rem black;
19
            text-align: center;
20
            color: orange;
21
        
22
        }
23
        .errormsg{
24
            color: red;
25
        }
26
        .errormsg-valid{
27
            color: green;
28
        }
29
    </style>
30
    <meta charset="UTF-8">
31
    <title>Log-IN</title>
32
</head>
33
<body>
34
<div class="login">
35
    <div>
36
        <label for="username">Username:</label>
37
        <input type="text" id="username" name="username">
38
    </div>
39

40
    <div>
41
        <label for="pass">Password:</label>
42
        <input type="password" id="pass" name="password"
43
               minlength="8" required>
44
    </div>
45

46
    <p class = "errormsg" id = "errormsg"></p>
47
    <input type="submit" value="Sign in" onclick="validLogin()">
48

49

50
</div>
51

52
</body>
53

54
</html>
Gast #6134594
Neue Klasse einfügen:
1
.centrize {
2
position:absolute;
3
top:50%;
4
left:50%;
5
transform:translate(-50%,-50%);
6
}

Und
1
<div class="login">
ändern in
1
<div class="centrize login"><div class="centrize">

Dann noch das letzte
1
</div>
ändern in
1
</div></div>

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 6 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.