Question

我正在开发一个Spring Boot Web App，并且在登录页面上有一个问题，您可以在上图中看到该问题，其中div不在页面上居中。我也在使用Bootstrap。

它似乎几乎居中，但由于某种原因略微偏左。我已经在下面发布了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>

自举水平对齐问题

1 个答案: