div 中怎么让字体和按钮对齐

可以使用 CSS 的 flexbox 布局来实现。

首先，给 div 添加一个样式：`display: flex; align-items: center;`，这样 div 内部的元素就会垂直居中对齐。

然后，给按钮添加一个样式：`margin-left: auto;`，这样按钮就会靠右对齐，同时和字体对齐。

完整的 CSS 代码如下：

div {
  display: flex;
  align-items: center;
}

button {
  margin-left: auto;
}

相关问题

使用bootstrap快速完成登录页面设计实验要求: 有系统名称 字体大小2rem/32px 用户和密码输入框前有对应的图标效果 自动登录、记住密码前设置复选框 “注册账号”和“扫码登录”设置为两端对齐 按钮样式为：绿色圆角大按钮 文本为白色

使用Bootstrap快速完成登录页面设计，可以按照以下步骤进行：

1. **引入Bootstrap**:
首先，在HTML文件头部添加Bootstrap的链接，或者如果使用CDN，可以用下面的代码：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">

2. **基础结构**:
创建基本的登录表单结构，包括标题、输入框、复选框等元素：

   <div class="container mt-5">
     <h1 class="text-center text-lg font-size-2rem">系统名称</h1>
     <form class="d-flex justify-content-between">
       <!-- 输入框部分 -->
       <div class="input-group mb-3">
         <span class="input-group-text"><i class="fas fa-user"></i></span>
         <input type="email" class="form-control" placeholder="用户名">
       </div>
       <div class="input-group mb-3">
         <span class="input-group-text"><i class="fas fa-key"></i></span>
         <input type="password" class="form-control" placeholder="密码">
       </div>

       <!-- 自动登录/记住密码复选框 -->
       <div class="form-check">
         <input type="checkbox" class="form-check-input">
         <label for="rememberMe" class="form-check-label">记住我</label>
       </div>
       <div class="form-check">
         <input type="checkbox" class="form-check-input">
         <label for="autoLogin" class="form-check-label">自动登录</label>
       </div>
     </form>
   </div>

3. **按钮设计**:
使用Bootstrap的按钮组件，设置为绿色圆角样式，并将文本颜色设为白色：

   <button type="submit" class="btn btn-success rounded-pill text-white">登录</button>

4. **额外功能按钮**:
对于“注册账号”和“扫码登录”，创建两个按钮并设置`text-align: start;`使其两端对齐：

   <div class="d-grid gap-2 align-items-center mt-4">
     <a href="#" class="btn btn-secondary rounded-pill me-auto">注册账号</a>
     <a href="#" class="btn btn-light rounded-pill">扫码登录</a>
   </div>

按钮怎么在div里面居中

回答: 要在div里面居中按钮，可以使用不同的方法。其中一种方法是使用position和transform/margin属性。首先，将父元素设置为相对定位(position: relative)，然后将子元素设置为绝对定位(position: absolute)并使用top: 50%和left: 50%将其移动到父元素的中心位置，最后使用transform: translate(-50%, -50%)将子元素向左和向上移动自身宽度和高度的一半，从而实现居中对齐。另一种方法是使用inline-block和vertical-align属性。首先，将父元素的字体大小设置为0，然后使用伪类(::before)在父元素内创建一个占位元素，并将其设置为inline-block并垂直居中(vertical-align: middle)，最后将子元素设置为inline-block并垂直居中(vertical-align: middle)。还有一种方法是使用margin: 0 auto属性来水平居中按钮，但这只适用于水平居中。如果要实现水平和垂直居中，可以使用jQuery等工具来实现。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
- *1* *2* [一些div垂直居中的方法](https://blog.csdn.net/weixin_45032067/article/details/126236966)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [如何在div中居中按鈕? - How to center a button within a div? - 开发者知识库](https://blog.csdn.net/weixin_42531128/article/details/117989969)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]