1

我正在创建一个登录表单，但在登录框上方添加徽标时遇到了麻烦。我在它们之间有两个徽标和一个文本，我需要它与响应行为一致。

我是一名 PHP 开发人员，我对设计一无所知。
如何实现如下图所示的布局？

<style>
  .container {
    display: flex;
    text-align: center;
  }
  
  .container>.logo {
    flex: 1;
    /*grow*/
  }
</style>

<body class="login-page">

  <!-- Progress Bar -->
  <div class="progress-wrap progress">
    <div class="progress-bar progress"></div>
  </div>

  <!-- Header -->
  <div class="header-container-wrapper">
    <div class="page-center">
      <a href="//www.c2perform.com">
        <img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
      </a>
    </div>
  </div>

  <!-- Body -->
  <div class="body-container-wrapper">
    <div class="page-center">
      <div class="container">
        <div class="logo">
          <img src="images/ef_logo.png" width="200px" height="auto">
        </div>
        <div class="logo">
          <h4>is now</h4>
        </div>
        <div class="logo">
          <img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
        </div>
      </div>
      <!-- Login -->
      <div class="login-box-wrapper">
        <div class="login-box">
          <h3>Log In</h3>
          <?php ef_print_notices();  ?>
          <!-- Login Form -->
          <form role="form" method="post" id="loginForm" class="form lostpass">
            <div class="form-group">
              <label for="inputEmail3">User Name</label>
              <div>
                <div>
                  <input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3">Password</label>
              <div>
                <div class="input-group">
                  <input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
                </div>
              </div>
            </div>
            <div class="form-group">
              <input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
              <div>
                <input type="submit" name="login" value="Login" class="button" />
              </div>
            </div>
            <div class="form-group">
              <div><a href="./lostpassword.php">Lost Password?</a></div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

所需的布局

4

2 回答 2

3

您需要align-items用于垂直对齐和justify-content水平对齐。

演示 

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container>.logo {
  flex-grow: 1;
  text-align: center;
}
<!-- Progress Bar -->
<div class="progress-wrap progress">
  <div class="progress-bar progress"></div>
</div>

<!-- Header -->
<div class="header-container-wrapper">
  <div class="page-center">
    <a href="//www.c2perform.com">
      <img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
    </a>
  </div>
</div>

<!-- Body -->
<div class="body-container-wrapper">
  <div class="page-center">
    <div class="container">
      <div class="logo">
        <img src="images/ef_logo.png" width="200px" height="auto">
      </div>
      <div class="logo">
        <h4>is now</h4>
      </div>
      <div class="logo">
        <img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
      </div>
    </div>
    <!-- Login -->
    <div class="login-box-wrapper">
      <div class="login-box">
        <h3>Log In</h3>
        <?php ef_print_notices();  ?>
        <!-- Login Form -->
        <form role="form" method="post" id="loginForm" class="form lostpass">
          <div class="form-group">
            <label for="inputEmail3">User Name</label>
            <div>
              <div>
                <input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3">Password</label>
            <div>
              <div class="input-group">
                <input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
            <div>
              <input type="submit" name="login" value="Login" class="button" />
            </div>
          </div>
          <div class="form-group">
            <div><a href="./lostpassword.php">Lost Password?</a></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

于 2019-08-30T05:04:23.373 回答
2

您还可以将显示行为更改为网格等，因此您可以定义图像应该向下显示的宽度。

.container {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.container>.logo {
  flex-grow: 1;
  text-align: center;
}
<!-- Progress Bar -->
<div class="progress-wrap progress">
  <div class="progress-bar progress"></div>
</div>

<!-- Header -->
<div class="header-container-wrapper">
  <div class="page-center">
    <a href="//www.c2perform.com">
      <img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
    </a>
  </div>
</div>

<!-- Body -->
<div class="body-container-wrapper">
  <div class="page-center">
    <div class="container">
      <div class="logo">
        <img src="images/ef_logo.png" width="200px" height="auto">
      </div>
      <div class="logo">
        <h4>is now</h4>
      </div>
      <div class="logo">
        <img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
      </div>
    </div>
    <!-- Login -->
    <div class="login-box-wrapper">
      <div class="login-box">
        <h3>Log In</h3>
        <?php ef_print_notices();  ?>
        <!-- Login Form -->
        <form role="form" method="post" id="loginForm" class="form lostpass">
          <div class="form-group">
            <label for="inputEmail3">User Name</label>
            <div>
              <div>
                <input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3">Password</label>
            <div>
              <div class="input-group">
                <input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
            <div>
              <input type="submit" name="login" value="Login" class="button" />
            </div>
          </div>
          <div class="form-group">
            <div><a href="./lostpassword.php">Lost Password?</a></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

在那里我说，只要项目的宽度至少为 100 像素，项目就可以保持内联，但是，如果项目不能达到最小宽度，那些不能达到的项目就会向下显示

于 2019-08-30T05:15:15.143 回答