Центр по горизонтали для отзывчивости с помощью CSS или JQuery - PullRequest
Новая
       3

Центр по горизонтали для отзывчивости с помощью CSS или JQuery

0 голосов
/ 25 сентября 2019

Я пытаюсь центрировать горизонтальный бутстрап в Django.Код работает правильно, когда я использую веб-браузер для настольной версии, но при использовании мобильного адаптивного кода идентификатор элемента s-fieldSet перемещается вправо.

Вот код: 

#s-fieldSet {
  width: 722px;
  height: 137px;
  margin-left: 0px;
  margin-top: 73px;
  position: absolute;
}

#s-Rectangle_1 {
  width: 718px;
  height: 130px;
  margin-left: 2px;
  margin-top: 6px;
  position: absolute;
  width: 718px;
  height: 130px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
  text-shadow: none;
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-top: 0px;
  line-height: 18px;
  font-size: 10.0pt;
  font-family: 'Arial', Arial;
}

#login_box {
  margin-left: 0px;
  margin-top: 5px;
  position: absolute;
  width: 722px;
  height: 132px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-top: 0px;
  box-shadow: none;
}

#login_box>img {
  height: 132px;
  width: 722px;
  box-shadow: none;
  background-color: #fff;
  margin-left: 0px;
  top: 5px;
}

#fieldset_title {
  margin-left: 78px;
  margin-top: 0px;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  font-family: 'Comic Sans MS', Arial;
  font-size: 10.0pt;
  height: auto;
  padding: 0px 0px 0px 0px;
  position: absolute;
  text-align: left;
  text-shadow: none;
  transform: rotate(0deg);
  vertical-align: middle;
  width: auto;
}

#fieldset_title span {
  color: #333333;
  text-align: left;
  text-decoration: none;
  font-family: 'Comic Sans MS', Arial;
  font-size: 10.0pt;
  font-style: normal;
  font-weight: 400;
}

#fieldset_title span#rtr-fieldset_title_0 {
  color: #333333;
  text-align: left;
  text-decoration: none;
  font-family: 'Comic Sans MS', Arial;
  font-size: 10.0pt;
  font-style: normal;
  font-weight: 400;
  line-height: 0px;
}

#id_password input::-webkit-input-placeholder {
  color: #B4B4B4;
}

#id_password input::-moz-placeholder {
  color: #B4B4B4;
}

#id_password input:-moz-placeholder {
  color: #B4B4B4;
}

#id_password input:-ms-input-placeholder {
  color: #B4B4B4;
}

#id_password {
  margin-left: 269px;
  margin-top: 147px;
  position: absolute;
  width: 299px;
  height: 34px;
  text-shadow: none;
  cursor: text;
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-top: 0px;
  vertical-align: middle;
  line-height: 10.0pt;
}

#id_password input {
  color: #000000;
  text-align: left;
  text-decoration: none;
  font-family: 'Arial', Arial;
  font-size: 10.0pt;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  height: calc(100% + -2px);
  width: calc(100% + -2px);
  background-color: #FFFFFF;
  background-image: none;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #C8C8C8;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #C8C8C8;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #C8C8C8;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #C8C8C8;
  box-shadow: none;
  height: 32px;
  width: 292px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 6px;
  padding-right: 1px;
}

#id_login input::-webkit-input-placeholder {
  color: #B4B4B4;
}

#id_login input::-moz-placeholder {
  color: #B4B4B4;
}

#id_login input:-moz-placeholder {
  color: #B4B4B4;
}

#id_login input:-ms-input-placeholder {
  color: #B4B4B4;
}

#id_login {
  margin-left: 269px;
  margin-top: 89px;
  position: absolute;
  width: 299px;
  height: 34px;
  text-shadow: none;
  cursor: text;
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-top: 0px;
  vertical-align: middle;
  line-height: 10.0pt;
}

#id_login input {
  color: #000000;
  text-align: left;
  text-decoration: none;
  font-family: 'Arial', Arial;
  font-size: 10.0pt;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  height: calc(100% + -2px);
  width: calc(100% + -2px);
  background-color: #FFFFFF;
  background-image: none;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #C8C8C8;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #C8C8C8;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #C8C8C8;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #C8C8C8;
  box-shadow: none;
  height: 32px;
  width: 292px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 6px;
  padding-right: 1px;
}

#title_login {
  margin-left: 132px;
  margin-top: 109px;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  font-family: 'Arial', Arial;
  font-size: 14.0pt;
  height: auto;
  padding: 0px 0px 0px 0px;
  position: absolute;
  text-align: left;
  text-shadow: none;
  transform: rotate(0deg);
  vertical-align: middle;
  width: auto;
}

#title_login span {
  color: #333333;
  text-align: left;
  text-decoration: none;
  font-family: 'Arial', Arial;
  font-size: 14.0pt;
  font-style: normal;
  font-weight: 400;
}

#title_login span#rtr-title_login_0 {
  color: #333333;
  text-align: left;
  text-decoration: none;
  font-family: 'Arial', Arial;
  font-size: 14.0pt;
  font-style: normal;
  font-weight: 400;
  line-height: 0px;
}

#title_password {
  margin-left: 132px;
  margin-top: 160px;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  font-family: 'Arial', Arial;
  font-size: 14.0pt;
  height: auto;
  padding: 0px 0px 0px 0px;
  position: absolute;
  text-align: left;
  text-shadow: none;
  transform: rotate(0deg);
  vertical-align: middle;
  width: auto;
}

#title_password span {
  color: #333333;
  text-align: left;
  text-decoration: none;
  font-family: 'Arial', Arial;
  font-size: 14.0pt;
  font-style: normal;
  font-weight: 400;
}

#title_password span#rtr-title_password_0 {
  color: #333333;
  text-align: left;
  text-decoration: none;
  font-family: 'Arial', Arial;
  font-size: 14.0pt;
  font-style: normal;
  font-weight: 400;
  line-height: 0px;
}

#title_forgetpassword {
  margin-left: 234px;
  margin-top: 224px;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  font-family: 'Arial', Arial;
  font-size: 10.0pt;
  height: auto;
  padding: 0px 0px 0px 0px;
  position: absolute;
  text-align: left;
  text-shadow: none;
  transform: rotate(0deg);
  vertical-align: middle;
  width: auto;
}

#title_forgetpassword span {
  color: #0DAAD7;
  text-align: left;
  text-decoration: none;
  font-family: 'Arial', Arial;
  font-size: 10.0pt;
  font-style: normal;
  font-weight: 400;
}

#title_forgetpassword span#rtr-title_forgetpassword_0 {
  color: #0DAAD7;
  text-align: left;
  text-decoration: none;
  font-family: 'Arial', Arial;
  font-size: 10.0pt;
  font-style: normal;
  font-weight: 400;
  line-height: 0px;
}

#title_forgetpassword span#rtr-title_forgetpassword_0>a {
  color: #0DAAD7;
  text-decoration: none;
}

#title_forgetpassword span#rtr-title_forgetpassword_0>a:hover {
  color: #0DAAD7;
  text-decoration: underline;
}

#login_button {
  margin-top: 204px;
  margin-left: 350px;
}

#s-Button_2 {
  margin-top: 224px;
  margin-left: 350px;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  background-color: transparent;
  background-image: -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
  background-image: -o-linear-gradient(top, #FFFFFF, #E6E6E6);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #E6E6E6));
  background-image: -webkit-linear-gradient(top, #FFFFFF, #E6E6E6);
  background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
  border: 1px solid #CDCDCD;
  box-shadow: none;
  font-family: 'Arial', Arial;
  font-size: 14.0pt;
  height: 32px;
  padding: 1px 1px 1px 1px;
  position: absolute;
  text-align: center;
  text-shadow: none;
  transform: rotate(0deg);
  vertical-align: middle;
  width: 114px;
}
<div class="container">

  <div class="row navigation">
  </div>

  <div class="row isi">
    <div class="col-sm-3 col-md-6 col-lg-2">
    </div>

    <div class="col-sm-9 col-md-6 col-lg-8">
      <div id="s-fieldSet" class="">
        <div id="s-Rectangle_1" class="">
          <span id="rtr-s-Rectangle_1_0"></span>
        </div>

        <div id="login_box" class="" alt="image">
          <img src="https://i.imgur.com/yFx3YpV.png" alt="Login" />
        </div>

        <div id="fieldset_title" class="">
          <span id="rtr-fieldset_title_0">Field Set / Group</span>
        </div>
      </div>

      <div id="title_login" class="">
        <span id="rtr-title_login_0">Login ID</span>
      </div>

      <div id="title_password" class="">
        <span id="rtr-title_password_0">Password</span>
      </div>


      <form class="login" method="POST" action="account_login">
        <input type="hidden" name="redirect_field_name" value="redirect_field_value" />
        <div id="title_forgetpassword" class="">
          <span id="rtr-title_forgetpassword_0"><a href="account_reset_password">Forgot password</a></span>
        </div>
        <button id="s-Button_2" class="primaryAction" type="submit">Sign In</button>
      </form>

    </div>

    <div class="col-sm-3 col-md-6 col-lg-2">
    </div>
  </div>

  <div class="row footer">
    <div class="col-sm-3 col-md-6 col-lg-4">
    </div>

    <div class="col-sm-3 col-md-6 col-lg-4">
    </div>

    <div class="col-sm-3 col-md-6 col-lg-4">
    </div>
  </div>
</div>

Как центрировать элемент s-fieldSet и его дочерних элементов по горизонтали с помощью CSS или Jquery?Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...