css设置表单中国的标题及输入框居中

可以使用以下 CSS 代码设置：

form {
  text-align: center; /* 让表单中的内容居中 */
}

form label {
  display: block; /* 将 label 元素设为块级元素 */
  text-align: center; /* 让 label 中的文本也居中 */
}

form input[type="text"], 
form input[type="email"], 
form input[type="password"] {
  display: block; /* 将 input 元素设为块级元素 */
  margin: 0 auto; /* 水平居中 */
}

需要注意的是，这里只给出了三种常见的输入框类型（文本框、邮箱框、密码框）的样式设置，如果还有其他类型的输入框，可以根据需要进行调整。另外，这里假设表单是一个块级元素，如果是行内元素，则需要将 `form` 元素设为 `display: inline-block;` 或者 `display: inline;`。

相关问题

body { background-color: #816868; /* 设置背景颜色 */ } form { max-width: 50px; /* 设置表单最大宽度 */ margin: 5px auto; /* 居中显示表单 */ padding: 1px; /* 添加内边距 */ background-color: white; /* 设置表单背景颜色 */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ } .section__title { font-weight: bold; /* 设置标题字体加粗 */ margin-bottom: 0px; /* 设置标题与输入框的间距 */ } input { width: 70%; /* 设置输入框宽度为100% */ padding: 2px; /* 设置输入框内边距 */ margin-bottom: 1px; /* 设置输入框之间的间距 */ border-radius: 4px; /* 添加边框圆角 */ border: 1px solid #ccc; /* 添加边框样式 */ } button { padding: 5px 5px; /* 设置按钮内边距 */ background-color: #007bff; /* 设置按钮背景颜色 */ color: white; /* 设置按钮文字颜色 */ border: none; /* 移除按钮边框 */ border-radius: 4px; /* 添加按钮圆角 */ } button[type="reset"] { background-color: #dc3545; /* 设置重置按钮背景颜色 */ }让.section__title 和input 在同一行

要让 `.section__title` 和 `input` 在同一行，您可以使用 flex 布局。您需要对每一行的容器元素应用 `display: flex;`，并使用适当的布局属性来控制它们的排列方式。

以下是修改后的样式代码，以便让 `.section__title` 和 `input` 在同一行：

form {
  /* 其他样式保持不变 */

  display: flex;
  align-items: center; /* 垂直居中 */
}

.section__title {
  /* 其他样式保持不变 */

  flex: 1; /* 占据剩余空间 */
}

input {
  /* 其他样式保持不变 */

  flex: 2; /* 占据两倍宽度 */
}

通过将容器元素 `form` 的 `display` 属性设置为 `flex`，然后将 `.section__title` 的 `flex` 属性设置为 `1`，将 `input` 的 `flex` 属性设置为 `2`，您可以实现 `.section__title` 和 `input` 在同一行，并且它们的宽度比例为 1:2。

form { display: flex; /* 将表单元素设置为弹性盒子 / justify-content: center; / 将表单元素中的内容水平居中对齐 / align-items: center; / 将表单元素中的内容垂直居中对齐 /}input[type="text"] { width: 300px; / 设置输入框的宽度 / padding: 10px; / 设置输入框的内边距 / border: 1px solid #ccc; / 设置输入框的边框 / border-radius: 5px; / 设置输入框的圆角 / font-size: 16px; / 设置输入框中的字体大小 /}button[type="submit"] { padding: 10px 20px; / 设置按钮的内边距 / border: none; / 去掉按钮的边框 / border-radius: 5px; / 设置按钮的圆角 / background-color: #007bff; / 设置按钮的背景色 / color: #fff; / 设置按钮的文本颜色 / font-size: 16px; / 设置按钮中的字体大小 / cursor: pointer; / 设置鼠标悬停在按钮上时的光标样式 */}把他缩小一点

可以使用缩放（scale）属性或者改变元素的宽度和高度来缩小这段代码，以下是一个示例，将整个表单缩小到原来的 80%：

form {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0.8); /* 缩小 20% */
}

input[type="text"] {
  width: 240px; /* 缩小输入框的宽度 */
  font-size: 13px; /* 缩小输入框中的字体大小 */
}

button[type="submit"] {
  padding: 8px 16px;
  font-size: 13px;
}