如何让Font Awesome图标在div内居中？登录表单场景求助

嘿，我来帮你搞定这个图标位置的事儿！要把fa-user-circle图标放在用户名输入框上方，咱们得调整一下HTML结构，再加点CSS样式就行，具体步骤如下：

• 第一步：调整HTML结构
  把图标和对应的用户名输入框放在同一个容器里，这样能更方便地控制它们的垂直排列。修改后的结构大概是这样：

  <div class="loginDiv">
    <form>
      <!-- 用户名组：图标 + 输入框 -->
      <div class="input-group">
        <i class="fa fa-user-circle"></i>
        <input type="text" placeholder="Username" name="username">
      </div>
      <!-- 密码组（如果需要同理添加图标） -->
      <div class="input-group">
        <i class="fa fa-lock"></i>
        <input type="password" placeholder="Password" name="password">
      </div>
      <!-- 登录按钮 -->
      <button type="submit">Login</button>
    </form>
  </div>
  

• 第二步：添加CSS样式
  用CSS让每个输入组里的图标和输入框垂直排列，还能调整一下间距和对齐效果，让整体更美观：

  .loginDiv {
    max-width: 300px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .input-group {
    /* 用flex垂直排列元素 */
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
  }
  
  .input-group i {
    /* 调整图标大小和对齐方式 */
    font-size: 24px;
    color: #666;
    margin-bottom: 8px;
    text-align: center; /* 让图标居中 */
  }
  
  .input-group input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  

这样一来，fa-user-circle图标就会乖乖地显示在用户名输入框的正上方啦！要是你还想调整图标的颜色、大小或者间距，直接修改CSS里的对应属性就行~

内容的提问来源于stack exchange，提问作者Anil