已解决问题 - 浏览1944次
下一个已解决问题
yiciyuan@yah
DIV+CSS LI里面怎么让垂直的文字垂直居中?
<!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">
<!--
.shoucang {
width: 58px;
height: 300px;
float: right;
background-color: #CCCCCC;
border: 1px solid #999999;
}
.shoucang .sc_ul {
width: 21px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.shoucang .sc_ul li {
height: 80px;
width: 21px;
margin-bottom: 9px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
vertical-align: middle;
background-color: #FF0000;
font-size: 12px;
border: 1px solid #666666;
}
-->
</style>
</head>
<body>
<div class="shoucang">
<ul class="sc_ul"><li>设为首页</li><li>收藏本站</li>
<li class="no">联系方式</li>
</ul>
</div>
</body>
</html>
问题补充：不但要垂直居中，而且还要左右居中，IE和火狐都要能通过。。
ystsangnbs最佳答案 - 由投票者2008-01-25 20:32:07选出
因为IE和火孤理解CSS是不同的, 只要在shoucang的float 设为center,改<div>???</div>成<center><div>???</div></center>，火狐达标．IE是不成的，ＩＥ的的float没作用，要在sc_ul定margin-left:５％．才达标．
所以制成２张ＣＳＳ表，ie.css 和ff.css．在页面中用ＪＡＶＡＳＣＲＩＰＴ定出用者是ＩＥ或火狐，然后用相关的ＣＳＳ．
网页是这样的
<html>
<head>
<script type="text/javascript">
function loadjscssfile(filename, filetype){
if (filetype=="css"){
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
}
if (typeof fileref!="undefined")
{
document.getElementsByTagName("head")[0].appendChild（fileref);
}
}
function detectBrowser()
{
var browser=navigator.appName;
if (browser=="Microsoft Internet Explorer")
{
loadjscssfile("ie.css", "css") ;
}
else
{
loadjscssfile("ff.css", "css") ;
}
}
</script>
</head>
<body onload="detectBrowser()">
<center>
<div class="shoucang">
<ul class="sc_ul">
<li>设为首页</li>
<li>收藏本站 </li>
<li>联系方式</li>
</ul>
</div>
</center>
</body>
</html>
//下面是ie.css
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
.shoucang {
width: 58px;
height: 300px;
background-color: #CCCCCC;
border: 1px solid #999999;
}
.sc_ul {
width: 21px;
margin-right: auto;
margin-left: 5%;
list-style-type: none;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
li{
height: 80px;
width: 21px;
margin-bottom: 9px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
vertical-align: middle;
background-color: #FF0000;
font-size: 12px;
border: 1px solid #666666;
//图是ff.css
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
