Question

我正在学习HTML，无法将HTML表单与网页中心对齐。请帮我解决这个问题。 HTML代码如下：

<body>
<div style="border: 1px solid black; width: 400px; text-align: center;" 
align="center"> 
<form >
<!-- some code -->
</form>
</div>
</body>

Answer 1

将margin: auto;添加到您的父div样式。那里不需要text-align和align。文本对齐将影响内部文本的对齐方式，而不会影响您设置的容器。

如果你试图将一个已知宽度的元素居中，那么你应该使用margin：0 auto;。

如果您试图将元素的内容（文本，图像等）居中，那么您应该使用text-align：center。

尽管可以使用text-align：center设置中心块元素，但它可以显示为内联（或内联块），并且在容器上使用text-align：center，您可能不应该这样做。

也请查看此链接，详细了解保证金的工作原理CSS Margins

Answer 2

从div标签中删除对齐中心并在表单前使用 center 标记，并在表单后关闭它。如果不能正常工作，请回复。我不使用div宽度（以像素为单位）请使用它的百分比如100％。如果您使用像素，当您切换到其他设备（如移动设备到桌面设备）时，您可能会遇到问题......

Answer 3

我相信你在寻找
this

<style>
.center {
    margin: auto;
    width: 400px;
    border:1px solid black;

}
</style>
<body>
<div class="center"> 

<form >
<!-- some code -->
</form>
</div>
</body>

Answer 4

首先将宽度属性设置为绝对单位（px，cm等）或相对单位（rem，em，％），然后使用margin-left:auto; and margin-right:auto;

为什么这样做？因为设置了块级元素的宽度后，浏览器（用户代理）可以进行计算，即为auto占位符指定精确值，例如：

freeSpace = parentElementWidth - childBlockLevelElementWidth;
auto = freeSpace/2;

Answer 5

要达到预期效果，请使用下面的弹性项目选项

下面提到的将垂直和水平居中的内容

align-items：center; // align-items将水平居中内容
justify-content：center; // justify-content将垂直居中

注意：要使对齐内容垂直居中，请将html和body全屏高度定义为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

Answer 6

你也可以在form form标签中指定style =“padding-left：200px”，但这在设计网站时不是一个好方法

Answer 7

body标签的默认宽度为100％。
你真的不需要div标签，虽然它没有伤害任何东西
在表单标记上将宽度设置为50％并添加边距：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表单？

7 个答案: