Label vertikal verschieben HTML

Alex A. OP #6133803
Lesenswert?
• ▲
▼ 
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>
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Sahneblubb Gast #6134594
Lesenswert?
• ▲
▼ 
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 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