Div'i Sayfaya Ortalama Problemi
Merhaba arkadaşlar. Div'i sayfaya ortalama işi beni deli ediyor. Ne zaman sayfaya "div" ortalamam gerekse 1 saat uğraşıyorum. :)
<style>
*{
margin:0px;
padding:0px;
}
body {
background:#cd5c5c;
}
.form-hizalama {
display:flex;
justify-content:center;
align-items:center;
text-align:center;
width:300px;
height:250px;
background:brown;
}
label {
font-size:20px;
color:white;
}
</style>
<div class="form-hizalama">
<form method="post" action="" name="signup-form">
<div class="form-element">
<label>Username</label>
</div>
<div>
<input type="text" name="username" pattern="[a-zA-Z0-9]+" required />
</div>
<div class="form-element">
<label>Email</label>
</div>
<div class="form-element">
<input type="email" name="email" required />
</div>
<div class="form-element">
<label>Password</label>
</div>
<div class="form-element">
<input type="password" name="password" required />
</div>
<button type="submit" name="register" value="register">Register</button>
</form>
</div>
sayfaya dediğin genel olarak body'e bir div ortalamak istersen yapay ve dikay olarak.
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
demen yeterli olacaktır. Eğer bir div içinde başka bir divi ortalamak istiyorsan bilmen gereken kapsayıcı divinin genişlik ve yüksekliği olması gerek buna göre ortalaması gerek. Örneğin;
<div class="kapsayici-div">
<div class="ortalanaca-div">
ortalanan içerik
</div>
</div>
<style>
.kapsayici-div {
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.ortalanan-div {
background: #000;
color: #fff;
padding: 30px;
}
</style>