Formamni qanday markazlashtira olaman? - HTML va CSS

I have a site here: http://americanbitcoinacademy.com/user-login/

Ko'rib turganimizdek, ariza hali markazlashtirilgan emas.

"Foydalanuvchi nomi", "parol", "meni eslab qolish" markazida joylashgan bo'lib, matn chap burchak ostida bo'lishi kerak.

enter image description here

Shaklni markazlashtirmoqchiman, so'ngra matnning nomini, parolini va eslab qoladigan belgini chapga aylantirmoqchiman ... elementni tekshirish vositasini qanday ishlatishim mumkin?

Mana CSS:

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #dd374d;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #43A047;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}
.form .register-form {
  display: none;
}

body {
  background: #ecf0f1; /* fallback for old browsers */
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;      
}

.page-heading{ display: none; }

Iltimos yordam bering!

0
Iltimos, javob qabul qilinganidek javobni belgilang, shunda boshqalar savolni hal qilmoqdalar
qo'shib qo'ydi muallif ZimSystem, manba
Shu bilan CSS-ni ishlatadigan 3501 cicada 3301 sahifa uchun kimdir bu erda?
qo'shib qo'ydi muallif Arin, manba

7 javoblar

form-kod dan text-align: center ni olib tashlang va col-md-9 dan class ub divni o'zgartiring col-md -12

<div id="content" role="main" class="col-md-12">
 ....
</div>

Yangilangan CSS-laringiz bo'ladi

.form {
    position: relative;
    z-index: 1;
    /* text-align:center; Remove this line */
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: left;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
1
qo'shib qo'ydi

Yo'q o'zgartirish. 1 -

 <div id="content" class="col-md-9" role="main"></div> to

<div id="content" class="col-md-12" role="main"></div>

Change no. 2-

.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
} to
.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: left;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

Yo'q o'zgartirish. 3- Quyidagi CSS-ni qo'shing -

.login-remember label{    width: 100%;}
.form .login-remember input{width: auto;}
1
qo'shib qo'ydi

In fact the form itself is centered inside its container

. You simply need to give that article, or actually its parent element (i.e. the div with id=content) full width.

For left alignment inside the form just change text-align: center to left inside the CSS rule for .form

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: left;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #dd374d;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #43A047;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}
.form .register-form {
  display: none;
}

body {
  background: #ecf0f1; /* fallback for old browsers */
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;      
}

.page-heading{ display: none; }
<div id="body" >
                <div class="container">
                                        <div class="content-pad-3x">
                            <div class="row">
                    <div id="content" class="col-md-9" role="main">
                        
<div class="login-page"> <div class="form"> <form class="login-form"> <form name="loginform" id="loginform" action="http://americanbitcoinacademy.com/wp-login.php" method="post"> </form>
Click here to become a full member…

</form> </div> </div>
</div> </div>
1
qo'shib qo'ydi

Ushbu turkumdan matnni taqqoslash: markaz; o'chirish -

.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

And add this CSS to the remember me checkbox width: auto;

Element darajasida CSS spesifikatsiyasidan foydalanishni taqiqlash kerak: .form input har doim sinflardan foydalanadi.

CSS-ning o'ziga xosligi haqida batafsil ma'lumot:

MDN: https://developer.mozilla.org/en/docs/Web/ CSS/o'ziga xosligi

Xususiylik kalkulyatori: https://specificity.keegan.st/

1
qo'shib qo'ydi

text-align: center shaklini .form sinfidan olib tashlang

.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

va col-md-9 sinfini tarkibi ga ega div kodini <

<div id="content" class="col-md-9" role="main">
1
qo'shib qo'ydi

Siz o'chirishingiz mumkin

matnni aylantirish: markaz;

formadagi elementingizdan.

1
qo'shib qo'ydi

for text left in labels..

.form label{width:100%;text-align:left;}

And if you change the
<div id="content" class="col-md-9" role="main">
to
<div id="content" class="col-md-12" role="main">
the form will be centered.
Cheers!

0
qo'shib qo'ydi