RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1264151
Accepted
Boris
Boris
Asked:2022-03-31 12:44:55 +0000 UTC2022-03-31 12:44:55 +0000 UTC 2022-03-31 12:44:55 +0000 UTC

如何使块居中?

  • 772

我不明白为什么授权表没有出现在中心?有什么问题,请告诉我。代码很简单,好吧,我达不到想要的结果

/*Background */

body {
  background: url(/images/bg/bg-6.png)
}


/* Form Style */

.form-horizontal {
  background: #fff;
  padding-bottom: 40px;
  border-radius: 15px;
  text-align: center;
}

.form-horizontal .heading {
  display: block;
  font-size: 35px;
  font-weight: 700;
  padding: 35px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 30px;
}

.form-horizontal .form-group {
  padding: 0 40px;
  margin: 0 0 25px 0;
  position: relative;
}

.form-horizontal .form-control {
  background: #f0f0f0;
  border: none;
  border-radius: 20px;
  box-shadow: none;
  padding: 0 20px 0 45px;
  height: 40px;
  transition: all 0.3s ease 0s;
}

.form-horizontal .form-control:focus {
  background: #e0e0e0;
  box-shadow: none;
  outline: 0 none;
}

.form-horizontal .form-group i {
  position: absolute;
  top: 12px;
  left: 60px;
  font-size: 17px;
  color: #c8c8c8;
  transition: all 0.5s ease 0s;
}

.form-horizontal .form-control:focus+i {
  color: #00b4ef;
}

.form-horizontal .fa-question-circle {
  display: inline-block;
  position: absolute;
  top: 12px;
  right: 60px;
  font-size: 20px;
  color: #808080;
  transition: all 0.5s ease 0s;
}

.form-horizontal .fa-question-circle:hover {
  color: #000;
}

.form-horizontal .main-checkbox {
  float: left;
  width: 20px;
  height: 20px;
  background: #11a3fc;
  border-radius: 50%;
  position: relative;
  margin: 5px 0 0 5px;
  border: 1px solid #11a3fc;
}

.form-horizontal .main-checkbox label {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.form-horizontal .main-checkbox label:after {
  content: "";
  width: 10px;
  height: 5px;
  position: absolute;
  top: 5px;
  left: 4px;
  border: 3px solid #fff;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.form-horizontal .main-checkbox input\[type=checkbox\] {
  visibility: hidden;
}

.form-horizontal .main-checkbox input\[type=checkbox\]:checked+label:after {
  opacity: 1;
}

.form-horizontal .text {
  float: left;
  margin-left: 7px;
  line-height: 20px;
  padding-top: 5px;
  text-transform: capitalize;
}

.form-horizontal .btn {
  float: right;
  font-size: 14px;
  color: #fff;
  background: #00b4ef;
  border-radius: 30px;
  padding: 10px 25px;
  border: none;
  text-transform: capitalize;
  transition: all 0.5s ease 0s;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="margin-top:10%">
  <div class="row">
    <div class="col-md-offset-6 col-md-6">
      <form class="form-horizontal">
        <span class="heading">АВТОРИЗАЦИЯ</span>
        <div class="form-group">
          <input type="email" class="form-control" id="inputEmail" placeholder="E-mail">
          <i class="fa fa-user"></i>
        </div>
        <div class="form-group help">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
          <i class="fa fa-lock"></i>
          <a href="#" class="fa fa-question-circle"></a>
        </div>
        <div class="form-group">
          <div class="main-checkbox">
            <input type="checkbox" value="none" id="checkbox1" name="check" />
            <label for="checkbox1"></label>
          </div>
          <span class="text">Запомнить</span>
          <button type="submit" class="btn btn-default">ВХОД</button>
        </div>
      </form>
    </div>

  </div>
  <!-- /.row -->
</div>
<!-- /.container -->

Bootstrap v3.4.1 包含在项目中

html
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    entithat
    2022-03-31T17:45:49Z2022-03-31T17:45:49Z

    根据您已有的,最简单的选择是将其更改col-offset-md-6为 3,因为 bootstrap 有 12 列,您跳过 6 列并再添加 6 列。

    /*Background */
    
    body {
      background: url(/images/bg/bg-6.png)
    }
    
    
    /* Form Style */
    
    .form-horizontal {
      background: #fff;
      padding-bottom: 40px;
      border-radius: 15px;
      text-align: center;
    }
    
    .form-horizontal .heading {
      display: block;
      font-size: 35px;
      font-weight: 700;
      padding: 35px 0;
      border-bottom: 1px solid #f0f0f0;
      margin-bottom: 30px;
    }
    
    .form-horizontal .form-group {
      padding: 0 40px;
      margin: 0 0 25px 0;
      position: relative;
    }
    
    .form-horizontal .form-control {
      background: #f0f0f0;
      border: none;
      border-radius: 20px;
      box-shadow: none;
      padding: 0 20px 0 45px;
      height: 40px;
      transition: all 0.3s ease 0s;
    }
    
    .form-horizontal .form-control:focus {
      background: #e0e0e0;
      box-shadow: none;
      outline: 0 none;
    }
    
    .form-horizontal .form-group i {
      position: absolute;
      top: 12px;
      left: 60px;
      font-size: 17px;
      color: #c8c8c8;
      transition: all 0.5s ease 0s;
    }
    
    .form-horizontal .form-control:focus+i {
      color: #00b4ef;
    }
    
    .form-horizontal .fa-question-circle {
      display: inline-block;
      position: absolute;
      top: 12px;
      right: 60px;
      font-size: 20px;
      color: #808080;
      transition: all 0.5s ease 0s;
    }
    
    .form-horizontal .fa-question-circle:hover {
      color: #000;
    }
    
    .form-horizontal .main-checkbox {
      float: left;
      width: 20px;
      height: 20px;
      background: #11a3fc;
      border-radius: 50%;
      position: relative;
      margin: 5px 0 0 5px;
      border: 1px solid #11a3fc;
    }
    
    .form-horizontal .main-checkbox label {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
    }
    
    .form-horizontal .main-checkbox label:after {
      content: "";
      width: 10px;
      height: 5px;
      position: absolute;
      top: 5px;
      left: 4px;
      border: 3px solid #fff;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    
    .form-horizontal .main-checkbox input\[type=checkbox\] {
      visibility: hidden;
    }
    
    .form-horizontal .main-checkbox input\[type=checkbox\]:checked+label:after {
      opacity: 1;
    }
    
    .form-horizontal .text {
      float: left;
      margin-left: 7px;
      line-height: 20px;
      padding-top: 5px;
      text-transform: capitalize;
    }
    
    .form-horizontal .btn {
      float: right;
      font-size: 14px;
      color: #fff;
      background: #00b4ef;
      border-radius: 30px;
      padding: 10px 25px;
      border: none;
      text-transform: capitalize;
      transition: all 0.5s ease 0s;
    }
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
    
    <div class="container" style="margin-top:10%">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          <form class="form-horizontal">
            <span class="heading">АВТОРИЗАЦИЯ</span>
            <div class="form-group">
              <input type="email" class="form-control" id="inputEmail" placeholder="E-mail">
              <i class="fa fa-user"></i>
            </div>
            <div class="form-group help">
              <input type="password" class="form-control" id="inputPassword" placeholder="Password">
              <i class="fa fa-lock"></i>
              <a href="#" class="fa fa-question-circle"></a>
            </div>
            <div class="form-group">
              <div class="main-checkbox">
                <input type="checkbox" value="none" id="checkbox1" name="check" />
                <label for="checkbox1"></label>
              </div>
              <span class="text">Запомнить</span>
              <button type="submit" class="btn btn-default">ВХОД</button>
            </div>
          </form>
        </div>
    
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->

    • 2

相关问题

  • 具有非均匀背景的块内的渐变边框

  • 离开页脚

  • 如何将三个字段的数据收集到一封电子邮件中?

  • Html 元素刚从父元素中出来

  • 如何在css中制作这个背景?

  • 如何制作带有斜条纹的背景?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    表格填充不起作用

    • 2 个回答
  • Marko Smith

    提示 50/50,有两个,其中一个是正确的

    • 1 个回答
  • Marko Smith

    在 PyQt5 中停止进程

    • 1 个回答
  • Marko Smith

    我的脚本不工作

    • 1 个回答
  • Marko Smith

    在文本文件中写入和读取列表

    • 2 个回答
  • Marko Smith

    如何像屏幕截图中那样并排排列这些块?

    • 1 个回答
  • Marko Smith

    确定文本文件中每一行的字符数

    • 2 个回答
  • Marko Smith

    将接口对象传递给 JAVA 构造函数

    • 1 个回答
  • Marko Smith

    正确更新数据库中的数据

    • 1 个回答
  • Marko Smith

    Python解析不是css

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5