css 中的文字如何居中？而不是div元素居中。

可口码农 2012-11-13 03:20:20

<!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=utf-8" />

<title>无标题文档</title>

<style type="text/css">



#left{

	float:left;

	width:550px;

	background:#F05;

	display:table-cell;

	vertical-align:middle;

}



h2 {

	font-size: 20px;

	font-family: "宋体";

	vertical-align:middle;

}



</style>

</head>



<body>



<div id="left"> 

  <h2>此处显示新 Dileftv 标签的内容</h2>

</div>



</body>

</html>

在搜狗、火狐、Chrome中显示是默认居中的，在ie6、世界之窗中显示是在垂直方向的上面。

如图是显示在上方：

我想让它如此图一样垂直居中，文字水平居中我会，不过垂直居中。
如图是垂直居中的：

...全文

502 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

残月照我心 2012-11-19

打赏
举报

<div style="width:100%; height:400px;background-color:#0066FF;"> <input type="button" value="确定" width="100" style=" position:relative; top:50%;left:50%;" /> </div> IE6、7、8、FF下测试成功。

kaidream 2012-11-19

打赏
举报

在文字俩边加上 <center>1111</center>

写个昵称都这么麻烦 2012-11-14

打赏
举报

设置行高跟你的高度一样他就居中了

calmthink 2012-11-14

打赏
举报

使用表格的 vertical-align property 属性，是不兼容ie6 ie7的。看看下面这篇文章，或许对你有帮助。 CSS实现垂直居中的5种方法：http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html

speed_feng 2012-11-13

打赏
举报

<div class="holder"> 居中文字 </div> <style> .holder{ width:600px; height:300px; line-height:300px; /*height line-height 相同*/ } </style> IE6+ FF CHROME 都没有问题

可口码农 2012-11-13

打赏
举报

可口码农 2012-11-13

打赏
举报

测试正确 www.jmsfang.com

xiaowanzi80hou 2012-11-13

打赏
举报

这个用vertical—align是没用的，需要加上line-height:100px;调试好的代码如下


<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
 
#left{
    float:left;
    width:550px;
    background:#F05;
    display:table-cell;
    vertical-align:middle;
	height:100px;
	line-height:100px;
}
 
h2 {
    font-size: 20px;
    font-family: "宋体";
	vertical-align:middle;
}
 
</style>
</head>
 
<body>
 
<div id="left" style="text-align:center;"> 
  <h2>此处显示新 Dileftv 标签的内容</h2>
</div>
 
</body>
</html>