Div'i Sayfaya Ortalama Problemi

yazilimyolcusu 1270 gün önce

746 defa görüntülendi

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>

css

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (2)

tayfunerbilen

1270 gün önce

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>

#005221

yazilimyolcusu

1270 gün önce

Teşekkür ederim. İşe yaradı.

#005227