Html内容竖直居中

最新推荐文章于 2022-08-22 23:09:11 发布

倪鹏

最新推荐文章于 2022-08-22 23:09:11 发布

阅读量1.4k

点赞数

分类专栏： html 文章标签： html 内容竖直对齐

本文链接：https://blog.csdn.net/u014552288/article/details/39930035

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

针对div块：

我们可以使用类选择器；

.divcenter{ line-height:100px; height:30px; margin-top:-15px;}

需要注意的是：margin-top一定要是height属性的1/2。当然需要加上负号。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
	#center{ 
		position:absolute; top:50%; left:50%; 
		margin-top:-50px; margin-left:20px;      
		width:800px;   
		height:100px;} 
		.divcenter{ line-height:100px; height:30px; margin-top:-15px;}
</style>
</head>

<body>
<div class="divcenter">
	<form action="" method="get">
		<table width="100%" height="100%" align="center">
			<tr>
				<td width="30%" colspan="1">关键字：
			  	<input type="text" name="keyword"/></td>
				<td width="30%" colspan="1">
					范围：
					<select name="scope">
						<option value="keywords">关键字</option>
						<option value="content">内容</option>
						<option value="keywordAndcontent">关键字和内容</option>
					</select>
			  </td>
			  <td width="40%" colspan="1"><button type="submit">搜索</button></td>
			</tr>
		</table>
	</form>
</div>
</body>
</html>

写的比较好的博客：

http://www.divcss5.com/rumen/r363.shtml

http://bbs.9ria.com/thread-195134-1-1.html

http://jingyan.baidu.com/article/2d5afd69eb72d385a2e28ecb.html