DIV ungewollt zentriert
Hallo liebes Forum,
in meinem neuen Projekt habe ich ein LoginDiv in meiner Tabelle, jedoch ist dieses DIV vertikal zentriert, und zwar ungewollt! Ich finden einfach nicht den Fehler, ein Bild wie es gemeint ist findet ihr im Anhang, vielen Dank schon mal.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
body{
background-size: cover;
background-image: url(/image/backgrnd_505.jpg);
font-family: meineSchrift;
}
main{
display:flex;
height: 500px;
}
main div{
flex:1;
border: 2px solid black;
}
form{
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items:center;
min-width:200px;
width:50%;
height: 50%;
border-radius: 20px;
background-color: rgba(68,79,188,0.7);
}
form input{
border: none;
padding: 10px;
height:20%;
margin-bottom:4%;
border-radius: 10px;
width:50%;
transition: padding 0.5s ease-in-out;
}
.benutzernameInput,
.passwortInput{
background-color: rgba(255,255,255,0.7);
}
.absendenInput{
background-color:rgba(140, 176, 234,0.7);
color: #ffffff;
font-size: 18px;
}
h1{
text-align: center;
color:rgba(255,255,255,0.7);
padding:15px;
transition: font-size 0.5s ease-in-out,color 0.5s ease-in-out;
}
h1:hover{
font-size: 36px;
color: rgb(255,255,255,1);
}
.loginText{
color:rgba(255,255,255,0.7);
text-align: center;
font-size: 25px;
padding:8px;
}
.benutzernameInput:hover,
.passwortInput:hover,
.absendenInput:hover{
padding: 15px;
}
</style>
<body>
<h1>PictureBank</h1>
<main>
<div id="left">
<form>
<p class="loginText">Login</p>
<input name="benutzername" class="benutzernameInput" type="text" value="Benutzername">
<input name="passwort" class="passwortInput" type="text" value="Passwort" onclick="this.type='password'; this.value='';">
<input class="absendenInput" type="submit" value="Einloggen">
</form>
</div>
<div id="right">
<!-- hier kommt registirerung form hin -->
</div>
</main>
</body>