我应该如何居中对齐html表单？
[英]How should I center align the html form?
问题描述
我正在学习HTML，但无法在网页中心对齐我的HTML表单。 请帮助我解决问题。 HTML代码如下：
<body>
<div style="border: 1px solid black; width: 400px; text-align: center;"
align="center">
<form >
<!-- some code -->
</form>
</div>
</body>
7 个解决方案
解决方案1
2 已采纳 2017-06-24 16:58:22
增加margin: auto; 您的父div样式。 此处不需要text-align和align 。 文本对齐方式将影响内部文本的对齐方式，而不是您要设置的容器的对齐方式。
如果尝试将宽度已知的元素居中，则应使用margin：0 auto;。
如果要居中放置元素（文本，图像等）的内容，则应使用text-align：center。
尽管可以通过设置text-align：center来使块元素居中，但可以将其显示为内联（或inline-block），并可以使用text-align：居中于容器中，而不应该这样做。
还要检查此链接，以了解有关保证金如何工作的更多信息CSS Margins
解决方案2
1 2017-06-24 17:09:51
从div标签中删除align center并在表格前使用center标签，然后在表格后关闭它。如果它不起作用请回复。仅供参考，请不要以像素为单位使用div宽度，例如以100％的百分比使用。当您切换到其他设备（例如移动设备到台式机）时，您可能会遇到问题...
解决方案3
0 2017-06-24 17:06:12
我相信你正在寻找
这个
<style>
.center {
margin: auto;
width: 400px;
border:1px solid black;
}
</style>
<body>
<div class="center">
<form >
<!-- some code -->
</form>
</div>
</body>
解决方案4
0 2017-06-24 17:06:56
首先将width属性设置为绝对单位（px，cm等）或相对单位（rem，em，％），然后使用margin-left:auto; and margin-right:auto; margin-left:auto; and margin-right:auto;
为什么要这样做？ 因为在设置块级元素的宽度之后，浏览器（用户代理）可以进行计算，即为auto占位符分配精确值，例如：
freeSpace = parentElementWidth - childBlockLevelElementWidth;
auto = freeSpace/2;
解决方案5
0 2017-06-24 17:09:02
为了达到预期的效果，请使用以下弹性项目选项
下面提到的将内容垂直和水平居中
align-items：居中; //对齐项将内容水平居中
justify-content：居中； // justify-content将内容垂直居中
注意：要使内容在垂直方向上居中，请定义html和正文全屏高度100％，因为默认情况下html，正文高度为auto，不会覆盖整个屏幕
CSS：
html, body{
height:100%;
}
body{
display:flex;
align-items: center;
justify-content: center;
height:100%;
}
Codepen参考- https://codepen.io/nagasai/pen/JJrPRM
解决方案6
0 2017-06-24 17:14:02
另外，您也可以在表单标签内指定style =“ padding-left：200px”，但这并不是设计网站的好方法
解决方案7
0 2017-06-24 17:17:32
- body标签的默认宽度为100％。
- 您实际上并不需要div标签，尽管它没有任何伤害
- 在表单标签上将宽度设置为50％并添加margin：0自动将表单居中
- 添加text-align：center将输入字段居中
<body style='border: 2px solid black;'> <form style='border: 2px solid red;width:50%;margin:0 auto;text-align:center'> <!-- some code --> <input type='text'> </form> </body>
HTML：如何居中对齐表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.