HTML如何使窗体居中

  • 本文关键字:窗体 何使 HTML html
  • 更新时间 :
  • 英文 :


我需要将表单居中放置在页面上。在进行web搜索时给出的常见解决方案表示,您可以在表单周围放置div,并应用align="中心";属性。但这会对齐窗体内部的控件,而不是窗体本身。给出的其他一些选项也集中控制。

请说明如何对表单控件内的属性执行此操作。我没有访问CSS文件的权限。

如果您想使块级元素居中,可以使用display flex,也可以使用带宽度的margin:0 auto。

带有自动自动的裕度示例

.myform {
margin 0 auto;
width: 400px
}

带有flex 的示例

.wrapper {
display flex;
align-items: center; /* or justify-content: center */
}
.myForm {
/* any width */
}

如果要使内联元素居中,则可以使用text-align:centre。

如果没有实际的代码,似乎很难帮助您,但是:

只是添加属性";align=center";没有帮助(请参阅http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/tags/att_object_align.asp.html(-你需要设置正确的CSS,可以是";文本对齐:居中;在包装div上,如您所见:https://css-tricks.com/almanac/properties/t/text-align/

否则,当使用flexbox居中时,您有很多选择,如您所见:https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

您可以使用内联样式来提供该代码(使用<style>-tag>(

如果您使用任何特殊的框架来解析HTML属性,那么这也需要在问题中指定。

希望这个答案至少能提供一些价值。下次,试着提供一个代码片段——这会让帮助你变得更容易。

进入Flex Box

如果您没有访问CSS文件的权限,请使用inline样式。

在以下示例中;父div为绿色;居中的形式是蓝色的。

<div style="display: flex; justify-content: center; background: green">
<form style="border: 1px dotted black; width: 250px; background: blue"> <!-- set the width to show that the centering does not affect the form content -->
<input type="text" value="I DO NOT WANT TO CENTER!" />
</form>
</div>

使用内联CSS,即使您无法访问CSS文件或提供片段来理解您的问题。简单地说,这里是代码

在指定类名的窗体周围放置一个div:

<div class = "a">

使用<style>...</style>

标签后的<head>标签(即内联css(,并使用文本对齐属性。

<style>
div.a{
text-align: center;
}
</style>

最新更新