Html 使用css垂直设置输入和标签标签的格式

我有这个HTML和css代码，这是一个表单

我尝试了在其他问题中找到的另一种解决方案，但我无法“垂直”对齐

输入和
标签

有人能帮我吗

PS.：在我的浏览器（
Firefox
）中，它在这张图片中看起来像…



.modal{
背景色：rgba（0,0,0,0.4）；
左：0；
排名：0；
宽度：100%；
身高：100%；
z指数：1；
位置：固定；
颜色：#B1EBF9；
}
.结束{
颜色：#111；
浮动：对；
字号：28px；
字体大小：粗体；
}
#迪文，
.邮政菜单{
过滤器：模糊（5px）；
}
.关闭：悬停，
.结束：聚焦{
颜色：红色；
文字装饰：无；
光标：指针；
}
.模态内容{
背景色：#3B474C；
浮动：中心；
/*边框：1px实心#000；
*/
宽度：35%；
身高：35%；
填充：1%；
不透明度：1；
左缘：40%；
右边距：40%；
利润率最高：20%；
利润底部：20%；
文本对齐：居中；
边界半径：15px；
}
#向上输入{
/*背景色：#546E7A*/
文本对齐：居中；
外观：无；
}
输入[类型=编号]：-webkit外部旋转按钮，
输入[类型=编号]：-webkit内部旋转按钮{
-webkit外观：无；
保证金：0；
}
输入[类型=数字]{
-moz外观：textfield；
最小值：0；
}
输入{
背景色：#3B474C；
颜色：#B1EBF9；
边框：2px#28C953实心；
边界半径：50px；
垫面：2%；
垫底：2%；
利润率最高：1%；
}
#纽扣更新{
背景色：#28C953；
利润率最高：3%；
边框：2px#28C953实心；
边界半径：50px；
垫面：2%；
垫底：2%；
左：6%；
右：6%；
颜色：#3B474C；
字体大小：粗体；
}



识别器：


电邮：


N工作：



不确定为什么将
标签作为输入+标签的容器，而不是
，但我只是使用了
显示：flex和
弯曲方向：列以使其垂直定向

因此，
表单p
的最后一个样式是我唯一更改的

例如，如果希望标签左对齐，只需添加：

form p label {
  align-self: flex-start;
}


.modal{
背景色：rgba（0,0,0,0.4）；
左：0；
排名：0；
宽度：100%；
身高：100%；
z指数：1；
位置：固定；
颜色：#B1EBF9；
}
.结束{
颜色：#111；
浮动：对；
字号：28px；
字体大小：粗体；
}
#迪文，
.邮政菜单{
过滤器：模糊（5px）；
}
.关闭：悬停，
.结束：聚焦{
颜色：红色；
文字装饰：无；
光标：指针；
}
.模态内容{
背景色：#3B474C；
浮动：中心；
/*边框：1px实心#000；
*/
宽度：35%；
身高：35%；
填充：1%；
不透明度：1；
左缘：40%；
右边距：40%；
利润率最高：20%；
利润底部：20%；
文本对齐：居中；
边界半径：15px；
}
#向上输入{
/*背景色：#546E7A*/
文本对齐：居中；
外观：无；
}
输入[类型=编号]：-webkit外部旋转按钮，
输入[类型=编号]：-webkit内部旋转按钮{
-webkit外观：无；
保证金：0；
}
输入[类型=数字]{
-moz外观：textfield；
最小值：0；
}
输入{
背景色：#3B474C；
颜色：#B1EBF9；
边框：2px#28C953实心；
边界半径：50px；
垫面：2%；
垫底：2%；
利润率最高：1%；
}
#纽扣更新{
背景色：#28C953；
利润率最高：3%；
边框：2px#28C953实心；
边界半径：50px；
垫面：2%；
垫底：2%；
左：6%；
右：6%；
颜色：#3B474C；
字体大小：粗体；
}
表格p{
显示器：flex；
弯曲方向：立柱；
}



识别器：


电邮：


N工作：



在代码段中看起来是垂直的，这可能取决于您的分辨率，但在图像中可以看到。。。我只想让它垂直格式化，而不是全部居中，不对齐哦，是的，不是全屏，这是因为我使用的是
django
使用更新视图（通用类）提供给我的更新表单。现在，我的表单看起来像这样：（您的代码正在运行，但我可能有什么地方弄乱了…您可以为输入添加一个固定的宽度。例如宽度：300px。然后将对齐项：居中；添加到完美工作的表单中！！