如何使文本在DIV中垂直居中

最新推荐文章于 2021-06-16 17:32:39 发布

ly5156

最新推荐文章于 2021-06-16 17:32:39 发布

阅读量443

点赞数

分类专栏： html css 文章标签： div 浏览器 border table c

html 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：

<html>

<head>

<style>

body{ TEXT-ALIGN: center; }

#center{ MARGIN-RIGHT: auto;

MARGIN-LEFT: auto;

height:200px;

background:#F00;

width:400px;

vertical-align:middle;

line-height:200px;

}

</style>

</head>

<body>

<div id="center"><p>test content</p></div>

</body>

</html>

说明：

vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。

CSS+DIV控制页面中元素垂直居中代码全局和区域垂直居中

另一方法:

***************************************

二，用JS使层居中

把如下代码加入<body>区域中

<DIV id=L1 style="HEIGHT: 107px; LEFT: 341px; POSITION: absolute; TOP: 585px; WIDTH: 205px; Z-INDEX: 1">

<TABLE bgColor=#ffffff border=1 borderColorDark=#ffffff borderColorLight=#000000 cellPadding=0 cellSpacing=0 width="100%">

<TR>

<TD height=1 width=178>□::BEST4U论坛::</TD>

<TD align=middle οnclick="L1.style.visibility='hidden'"

style="CURSOR: hand" width=21>х</TD></TR>

<TR vAlign=top>

<TD colSpan=2

height=91>欢迎光临本站!<BR><BR>本站域名:<BR>http://webform.cn

</TD></TR></TABLE></DIV>

<SCRIPT LANGUAGE="JavaScript">

function moveit() //这个函数用于把层放到浏览器中间

{

L1.style.left=((document.body.offsetWidth-parseFloat (L1.style.width))/2)+document.body.scrollLeft;

L1.style.top=((document.body.offsetHeight-parseFloat (L1.style.height))/2)+document.body.scrollTop;

}

window.οnlοad=moveit; //网面打开时时执行moveit()

window.οnresize=moveit; //当调整浏览器大小时执行moveit()

window.οnscrοll=moveit; //当拉动滚动条时执行moveit()

</SCRIPT>