html - Bootstrap 水平对齐问题

Question

我正在开发一个 Spring Boot Web 应用程序并且在登录页面上遇到问题，您可以在附图中看到，其中 div 不完全位于页面中心。我也在使用引导程序。

看起来它几乎居中，但由于某种原因偏左一点。我在下面发布了我的 HTML 和相关的 CSS。它的某些部分一定是冲突的，但我不确定在哪里。

<div id="parentLogin">

    <div class="row" style="width: 40%;">
        
        <div class="col-md-12 col-md-offset-2">
        
            <div>
                <c:if test="${param.error != null}">
                    <div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
                </c:if>
            </div>
    
            <div class="panel panel-default">
    
                <div class="panel-heading">
                    <div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
                </div>
                
                <div class="panel-body">
    
                    <form method="post" action="${loginUrl}" class="login-form">
                    
                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    
                        <div class="input-group">
                            <input type="text" name="username" placeholder="Username"
                                class="form-control" />
                        </div>
    
    
                        <div class="input-group">
                            <input type="password" name="password" placeholder="Password"
                                class="form-control" />
                        </div>
    
                        
                        <button type="submit" class="suit_and_tie">Sign In</button>
                        
                    </form>
    
                </div>
    
            </div>
    
        </div>
        
    </div>
    
</div>

#parentLogin {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
}

Answer 1

以 id="parentLogin" 作为父级的 div 居中...固定宽度为可用宽度的 40%。但是看起来你的引导面板并没有在那个 div 中居中......你应该将类添加到整个子对象链......每个类都应该使用 display: flex; 并且应该指定 flex-direction、align-items 和 justify-content。您可以为这些使用 Bootstrap 类...但是父子链中的每个元素都应指定其内容的对齐方式。

#parentLogin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 75vh;
  width: 100%;
}

.parentRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 75vh;
}

.parentCol {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 75vh;
}

<div id="parentLogin">
  <div class="row parentRow" style="width: 40%;">
    <div class="col-md-12 col-md-offset-2 parentCol">
      <div>
        <c:if test="${param.error != null}">
          <div class="login-error" style="margin: 0 auto;">
            Incorrect username or password
          </div>
        </c:if>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">
            User Login
          </div>
        </div>
        <div class="panel-body">
          <form method="post" action="${loginUrl}" class="login-form">
            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
            <div class="input-group">
              <input type="text" name="username" placeholder="Username" class="form-control" />
            </div>
            <div class="input-group">
              <input type="password" name="password" placeholder="Password" class="form-control" />
            </div>
            <button type="submit" class="suit_and_tie">
              Sign In
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>