hmtl登陆界面和div元素居中显示

最新推荐文章于 2022-03-24 22:14:54 发布

xtf__moji

最新推荐文章于 2022-03-24 22:14:54 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 前端

本文链接：https://blog.youkuaiyun.com/GoOnDrift/article/details/103387294

前端同时被 2 个专栏收录

20 篇文章

订阅专栏

14 篇文章

订阅专栏

本文详细介绍了如何在网页设计中使元素水平和垂直居中，包括使用div的align属性进行水平居中，以及通过CSS的margin-top属性实现垂直居中的方法。同时，文章提供了具体的代码示例和解释，帮助读者理解不同属性的适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平居中

使用div的align属性，align 属性规定 div 元素中的内容的水平对齐方式。

<div align="center"> 
    This is some text! 
</div>

<div align="center"> 和<div style="align:center"> 渲染效果应该一样的吧？可我在测试时第一种方法可以居中，而第二种方法就不行了。

这是因为align=center居中属性是html的所以你可以使用，但是style 这是css样式，css样式中没有align：center这一项属性，所以就没有用了呢；如果您想居中的话文字居中是text-aligin：center；div居中是margin：auto；

垂直居中

可以使用CSS margin-top 属性，设置 p 元素的上外边距。

大致居中就好了，例如：

style="margin-top:10%;"
style="margin-top:200px;"

p
  {
  margin-top:2cm;
  }

举个例子，登陆界面，增加一个div，对这个div设置水平居中，调节垂直位置：

<body >
	<div align="center" style="margin-top:10%;">
		<h2 align="center"><font color=red>用户登录页面</font></h2>
		<form action="success.jsp" method="post">
		<table border="1" >
			<tr>
				<td>用户名:</td>
				<td><input type="text" name="name"></td>
			</tr>
			<tr>
				<td>密&nbsp;&nbsp;码:</td>
				<td><input type="text" name="password"></td>
			</tr>
			<tr>
				<td><input type="submit" value="登录" name="login"></td>
				<td><input type="reset" value="重置" name="reset"></td>
			</tr>
		</table>
		<p align="center"><a href="registered.jsp" color=blue>注册用户</a></p>
		</form>
	</div>
</body>

效果如图：