html添加输入框居中
时间: 2023-06-24 21:07:28 浏览: 272
您可以使用CSS来使输入框居中。首先,在HTML中创建一个输入框:
```html
<input type="text" name="inputBox">
```
然后,在CSS中为其添加样式,让其居中:
```css
input[type="text"] {
display: block; /* 将输入框变为块状元素 */
margin: 0 auto; /* 设置左右外边距为自动,使其水平居中 */
}
```
这样,输入框就可以水平居中了。
相关问题
输入框网站居中
要让输入框居中,可以使用以下两种方法中的一种:
### 方法一:使用 Bootstrap 的 d-flex 和 justify-content-center 类
通过给输入框的外层容器添加 `d-flex` 和 `justify-content-center` 类,可以使输入框水平居中。
HTML 代码:
```
<div class="container mt-5 d-flex justify-content-center">
<form>
<div class="form-group">
<input type="text" class="form-control" id="searchInput" placeholder="请输入搜索内容">
</div>
</form>
</div>
```
### 方法二:使用 margin 和 text-center 类
通过给输入框的外层容器添加 `text-center` 类,并使用 `margin` 属性来使输入框水平居中。
HTML 代码:
```
<div class="container mt-5 text-center">
<form style="margin: 0 auto;">
<div class="form-group">
<input type="text" class="form-control" id="searchInput" placeholder="请输入搜索内容">
</div>
</form>
</div>
```
以上两种方法都可以实现输入框的水平居中,您可以根据自己的喜好和实际情况选择一种方法。
建立一个html页面,添加表单元素,引入Bootstrap,第一行为学号,下面为输入框;第二行为姓名,下面为输入框;第三行为性别,下面为选项框:男 女 ;第四行为班级,下面为下拉选择框;第五行为出生日期,下面为输入框;下一行居中为添加按钮,最后一行居中为OK按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单页面</title>
<!-- 引入Bootstrap -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>学生信息表单</h1>
<form>
<div class="form-group row">
<label for="student-id" class="col-sm-2 col-form-label">学号</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="student-id" placeholder="请输入学号">
</div>
</div>
<div class="form-group row">
<label for="student-name" class="col-sm-2 col-form-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="student-name" placeholder="请输入姓名">
</div>
</div>
<div class="form-group row">
<label for="student-gender" class="col-sm-2 col-form-label">性别</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="student-gender" id="male" value="male">
<label class="form-check-label" for="male">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="student-gender" id="female" value="female">
<label class="form-check-label" for="female">女</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="student-class" class="col-sm-2 col-form-label">班级</label>
<div class="col-sm-10">
<select class="form-control" id="student-class">
<option>请选择班级</option>
<option>一班</option>
<option>二班</option>
<option>三班</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="student-birth" class="col-sm-2 col-form-label">出生日期</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="student-birth">
</div>
</div>
<div class="form-group row justify-content-center">
<button type="button" class="btn btn-primary">添加</button>
</div>
<div class="form-group row justify-content-center">
<button type="submit" class="btn btn-success">OK</button>
</div>
</form>
</div>
</body>
</html>
阅读全文