CSS-da, HTML-da markazlashuv muammolari

Men ushbu formaning o'rtada bo'lishini va u ishlayotganini yaxshi bilaman. Komponentni mukammal tarzda markazlashtirishga qodir bo'la olmayman, lekin men fonda bu haqda juda yaxshi ma'lumotga ega bo'la olmayman, birovning menga yordam berishi mumkin bo'lgan millionlab narsalarni sinab ko'rdim ? Ilgari rahmat.

HTML:

    <!DOCTYPE HTML>
        <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="css/style.css">
            <title>Accounts</title>
        </head>
        <body>
            <div class="authform">
                <form class="my-form form-horizontal">
                    <div class="color">
                        
<div class="col-md-5">
<input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text">
</div>


<div class="col-md-5">
<input id="password" name="password" placeholder="Password" class="form-control input-md a-in" required="" type="password">
</div>


<div class="col-md-4"> <button id="send" name="send" class="btn">Auth</button> </div>
 
                    </div>
                </form>
            </div>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

CSS:

.authform {

  padding-top: 15%;
  width: 50%;
  margin: auto;
  float: center;

}
.color {

  margin: auto;
  float: center;
  background-color: #2ecc71;
  border-radius: 25px;
  border: 2px solid #2ecc71;
  padding: 20px;

}
1

6 javoblar

Siz FlexBox ni sinab ko'rishingiz mumkin. Menimcha, CSS-ga hech qachon tushmagan eng yaxshi narsa.

HTML-dan foydalanib sizning misol uchun mening CodePen ni ko'ring.

CSS-ning ushbu 3 satrlari eng muhimi:

display: flex;
align-items: center;
justify-content: center;

Edit: My CodePen might not look perfectly centered, but that's because height: 100vh doesn't really work in CodePen. But it'll work outside of CodePen.

Edit 2: Updated codepen

2
qo'shib qo'ydi
CodePen-ni yangiladim. Faqat boshqa FlexBox-dan foydalanish masalasi bo'ldi. Bundan tashqari: HTMLni qanday soddalashtirganimni ko'rib chiqing. Bu menga aniq o'ylash va loyihalashtirish imkonini beradi. Katta veb-saytlar uchun ham oddiy HTML - bu ajoyib usul. Bundan tashqari, Bootstrap-dan foydalanishni xush ko'rsangiz-da, uni kamida ushlab turishni ma'qul ko'raman.
qo'shib qo'ydi muallif Gabe Rogan, manba
Bu haqiqatan ham markazlashtiriladi, lekin endi kiritilgan ma'lumotlar qo'shilgandagina ko'rilgan ibb.co/eBTdmF . {kenglik: 360px; } Agar matn bo'lmasa, unda kichikroq bo'ladi
qo'shib qo'ydi muallif Itsmoloco, manba

Siz FlexBox ni sinab ko'rishingiz mumkin. Menimcha, CSS-ga hech qachon tushmagan eng yaxshi narsa.

HTML-dan foydalanib sizning misol uchun mening CodePen ni ko'ring.

CSS-ning ushbu 3 satrlari eng muhimi:

display: flex;
align-items: center;
justify-content: center;

Edit: My CodePen might not look perfectly centered, but that's because height: 100vh doesn't really work in CodePen. But it'll work outside of CodePen.

Edit 2: Updated codepen

2
qo'shib qo'ydi
CodePen-ni yangiladim. Faqat boshqa FlexBox-dan foydalanish masalasi bo'ldi. Bundan tashqari: HTMLni qanday soddalashtirganimni ko'rib chiqing. Bu menga aniq o'ylash va loyihalashtirish imkonini beradi. Katta veb-saytlar uchun ham oddiy HTML - bu ajoyib usul. Bundan tashqari, Bootstrap-dan foydalanishni xush ko'rsangiz-da, uni kamida ushlab turishni ma'qul ko'raman.
qo'shib qo'ydi muallif Gabe Rogan, manba
Bu haqiqatan ham markazlashtiriladi, lekin endi kiritilgan ma'lumotlar qo'shilgandagina ko'rilgan ibb.co/eBTdmF . {kenglik: 360px; } Agar matn bo'lmasa, unda kichikroq bo'ladi
qo'shib qo'ydi muallif Itsmoloco, manba

Siz kirish uchun bootstrapdan foydalanmoqdasiz. Bootstrap ustunlari har bir satrda 12 bo'lishi kerak. Sizning holatlaringizda har bir kiritilganidan so'ng bitta divni qo'shishingiz kerak.

  
<div class="col-md-4">
    
<input id="username" name="username" placeholder="Username" class="fyokim-control input-md a-in" required="" type="text">
</div>
<div class="col-md-4"></div>

yoki

  
<div class="col-md-6">
    
<input id="username" name="username" placeholder="Username" class="fyokim-control input-md a-in" required="" type="text">
</div>
<div class="col-md-3"></div>
0
qo'shib qo'ydi

Siz kirish uchun bootstrapdan foydalanmoqdasiz. Bootstrap ustunlari har bir satrda 12 bo'lishi kerak. Sizning holatlaringizda har bir kiritilganidan so'ng bitta divni qo'shishingiz kerak.

  
<div class="col-md-4">
    
<input id="username" name="username" placeholder="Username" class="fyokim-control input-md a-in" required="" type="text">
</div>
<div class="col-md-4"></div>

yoki

  
<div class="col-md-6">
    
<input id="username" name="username" placeholder="Username" class="fyokim-control input-md a-in" required="" type="text">
</div>
<div class="col-md-3"></div>
0
qo'shib qo'ydi

Ehtimol siz sinab ko'rishingiz mumkin:

text-align:center;
margin-left:(half of the Pixels of the screen) 
margin-top:(half of the Pixels of the screen)
0
qo'shib qo'ydi

Orqa fonni va chegarani .authform sinfiga qo'llash mumkin emasmi yoki boshqa ko'rinishga intilyapsizmi?

.authform {
  padding: 15% 20px 20px;
  width: 50%;
  margin: auto;
  background-color: #2ecc71;
  border-radius: 25px;
  border: 2px solid #2ecc71;
}
0
qo'shib qo'ydi