DIV中的内容如何让其垂直居中？

2012-03-06

DIV中的内容怎么让其垂直居中？？？？？!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN http://w

DIV中的内容怎么让其垂直居中？？？？？
<!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 " lang= "gb2312 " xml:lang= "gb2312 ">
<head>
<title> Down CSS </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<script type= "text/javascript " src= "chrome.js ">
</script>
<style type= "text/css ">


.chromestyle ul li a {
color:#494949;
padding:4px 7px;
margin:0;
text-decoration:none;
border-right:1px solid #DADADA;
}

.chromestyle ul li a[rel]:after{
content: "v ";
}

.chromestyle:after{

content: ". ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.dropmenudiv {
position:absolute;
top:0;
border:1px solid #165AB3; /*边框*/
border-bottom-width:0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color:#5293d1;
width:100px;
visibility:hidden;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
}

.dropmenudiv a{
width:auto;
display:block;
text-align:3x;
padding:2px 0;
border-bottom:1px solid #165AB3;/*设置对象下边框的样式*/
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
}

* html .dropmenudiv a{
width:100%;
}

.dropmenudiv a:hover
{
background-color:#1d7fdb;
}
body {
font-size: 12px;
text-decoration: none;
margin: 0px;
text-align:center;
}

a:link {
color: #FFFFFF;
text-decoration: none;
}

a:visited {
color: #FFFFFF;
text-decoration: none;
}

a:hover {
text-decoration: none;
color:#FFFF00
}

a:active {
color: #FFFFFF;
text-decoration: none;

}

a.hidden {
color: #FFFFFF;
}

-->
</style>
</head>

<body>



<div id= "chromemenu " class= "chromestyle ">
<ul>
<li> <a href= "# "> 首页 | </a> </li>
<li> <a href= "# " rel= "dropmenu1 "> 新闻中心 | </a> </li>
<li> <a href= "# " rel= "dropmenu2 "> 产品方案 | </a> </li>
<li> <a href= "# " rel= "dropmenu3 "> 服务支持 | </a> </li>
<li> <a href= "# " rel= "dropmenu3 "> 人才招聘 | </a> </li>
<li> <a href= "# " rel= "dropmenu3 "> 关于众志 | </a> </li>

</ul>
</div>


<div id= "dropmenu1 " class= "dropmenudiv ">
<a href= "# "> Dynamic Drive </a>
<a href= "# "> CSS Drive </a>
<a href= "# "> JavaScript </a>
<a href= "# "> Coding Forums </a> </div>


<div id= "dropmenu2 " style= "width:100px; " class= "dropmenudiv ">
<a href= "# "> CNN </a>
<a href= "# "> MSNBC </a>
<a href= "# "> BBC News </a>
<a href= "# "> VCS </a>
<a href= "# "> Menus </a>
</div>


<div id= "dropmenu3 " style= "width:100px; " class= "dropmenudiv ">
<a href= "# "> Google </a>
<a href= "# "> Yahoo </a>
<a href= "# "> Sohu </a>
<a href= "# "> Tencent </a> </div>

<script type= "text/javascript ">
cssdropdown.startchrome( "chromemenu ")

</script>

</body>
</html>

[解决办法]
div没有垂直居中这个属性,
你可以借助padding来实现
如:padding:10px 5px 10px 5px;
[解决办法]
用line-height来控制~
[解决办法]
line-height是可以的
[解决办法]
line-height 是可以控制的

热点排行

CSS

DIV中的内容 如何让其垂直居中？

DIV中的内容如何让其垂直居中？