目的：
讓網頁的menu選單裡面的文字垂直置中。
目前狀況：
中文比英文高一點，沒辦法垂直置中對齊。
狀況截圖：
嘗試：
我試過了 vertical-align 以及 line-height 兩種方式，還是不行
網頁原始碼：
代碼:
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="header_resize">
<div class="header">
<div class="logotop"></div><div class="logomain"></div><div class="logobottom"></div>
<div class="logotable" align="center"><a href="#" title="">Admin Control Panel</a></div>
<div class="logotop"></div><div class="logomain"></div><div class="logobottom"></div>
<div class="clr"></div>
</div>
</div>
<div class="menu_resize">
<div class="menu">
<div class="search">
<form id="form1" name="form1" method="post" action="">
<span>
<input name="q" type="text" class="keywords" maxlength="50" value="Search..." />
</span>
<input name="b" type="image" src="images/search.gif" class="button" />
</form>
</div>
<ul>
<li><a href="#" class="active">測試</a></li>
<li><a href="#">abc</a></li>
<li><a href="#">abc</a></li>
<li><a href="#">abc</a></li>
</ul>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="body">
<div class="body_resize">
<div class="left">
<h2>abc</h2>
</div>
<div class="right">
<h2>abc</h2>
</div>
<div class="clr"></div>
</div>
</div>
<div class="clr"></div>
<div class="footer">
<div class="footer_resize">
<p class="leftt">abc</p>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="header_resize">
<div class="header">
<div class="logotop"></div><div class="logomain"></div><div class="logobottom"></div>
<div class="logotable" align="center"><a href="#" title="">Admin Control Panel</a></div>
<div class="logotop"></div><div class="logomain"></div><div class="logobottom"></div>
<div class="clr"></div>
</div>
</div>
<div class="menu_resize">
<div class="menu">
<div class="search">
<form id="form1" name="form1" method="post" action="">
<span>
<input name="q" type="text" class="keywords" maxlength="50" value="Search..." />
</span>
<input name="b" type="image" src="images/search.gif" class="button" />
</form>
</div>
<ul>
<li><a href="#" class="active">測試</a></li>
<li><a href="#">abc</a></li>
<li><a href="#">abc</a></li>
<li><a href="#">abc</a></li>
</ul>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="body">
<div class="body_resize">
<div class="left">
<h2>abc</h2>
</div>
<div class="right">
<h2>abc</h2>
</div>
<div class="clr"></div>
</div>
</div>
<div class="clr"></div>
<div class="footer">
<div class="footer_resize">
<p class="leftt">abc</p>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
</body>
</html>
CSS原始碼：
代碼:
@charset "utf-8";
body { margin:0; padding:0; width:100%; background: #000000; color: #ffffff;}
html { padding:0; margin:0;}
.main { margin:0 auto; padding:0;}
/********** header **********/
.header_resize { margin:0; padding:0; background:url(images/header_bg.gif) top repeat-x;}
.header { width:100; padding:0; margin:0 auto; border-bottom:1px solid #484848;}
/* logo */
.logotop { height: 2px; background: #666666 }
.logomain { height: 5px; background: #555555 }
.logotable { background: #555555 }
.logotable a { font-size: 50px; color: #fff; text-decoration: none;}
.logobottom { height: 2px; background: #333333 }
.logotop, .logomain, .logobottom, { line-height: 0px; padding: 0px; }
/*menu*/
.menu_resize { margin:0 auto; padding:0;padding:0;}
.menu { border:1px solid #666666; background:#444444; padding:0; margin:0 auto; height: 37px; line-height:37px;}
.menu ul { padding:0; margin:0; list-style:none; border:0; float:left;}
.menu ul li { float:left; margin-top:5px; padding:0; border:0; border-right:1px solid #666666; height: 27px; line-height:27px;}
.menu ul li a {text-align:left; position:relative; top:10px; height:37px; line-height:37px; color:#ffffff; float:left; margin-top:-5px; padding:0 15px; font:normal 20px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { background:#000000;}
.menu ul li a.active { }
/* search */
.search { padding:0; margin:0 auto; width:200px; float:right; margin-top:5px;}
.search form { padding:0; margin:0 auto;}
.search span { display:block; float:left; background: url(images/search_bg.gif) left top no-repeat; width:146px; padding:0 5px;}
.search form .keywords { width:146px; line-height:13px; height:13px; float:left; background:none; border:0; padding:7px 0; margin:0; font:normal 15px Arial, Helvetica, sans-serif;}
.search form .button { float:left; margin:0; padding:0;}
/* body */
.body_resize {padding:0; margin:0 auto;}
.body { padding:0; margin:0 auto; border-bottom:1px solid #111;}
.body h2 { font:normal 18px Arial, Helvetica, sans-serif; padding:20px 5px; margin:0 0 10px 0;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; line-height:1.8em; padding:3px 5px; margin:0;}
.body p span { font: normal 11px Arial, Helvetica, sans-serif;}
.body a { color:#801e14; text-decoration:none;}
.right { width:680px; margin:0; padding:0 10px; float:right;}
.left { width:240px; margin:0; padding:0 10px; float:left;}
/*************footer**********/
.footer { padding:0; margin:0; border-top:1px solid #666666; background:#444444;}
.footer_resize { margin:0 auto; padding:10px 10px;}
.footer p { font:normal 15px Arial, Helvetica, sans-serif;}
.footer a { font:bold 15px Arial, Helvetica, sans-serif; text-decoration:none; padding:5px; margin:0;}
.footer p.right { text-align:right; width:350px; margin:0; padding:0; float:right;}
.footer p.leftt { text-align:left; width:550px; margin:0; padding:0; float:left;}
p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
body { margin:0; padding:0; width:100%; background: #000000; color: #ffffff;}
html { padding:0; margin:0;}
.main { margin:0 auto; padding:0;}
/********** header **********/
.header_resize { margin:0; padding:0; background:url(images/header_bg.gif) top repeat-x;}
.header { width:100; padding:0; margin:0 auto; border-bottom:1px solid #484848;}
/* logo */
.logotop { height: 2px; background: #666666 }
.logomain { height: 5px; background: #555555 }
.logotable { background: #555555 }
.logotable a { font-size: 50px; color: #fff; text-decoration: none;}
.logobottom { height: 2px; background: #333333 }
.logotop, .logomain, .logobottom, { line-height: 0px; padding: 0px; }
/*menu*/
.menu_resize { margin:0 auto; padding:0;padding:0;}
.menu { border:1px solid #666666; background:#444444; padding:0; margin:0 auto; height: 37px; line-height:37px;}
.menu ul { padding:0; margin:0; list-style:none; border:0; float:left;}
.menu ul li { float:left; margin-top:5px; padding:0; border:0; border-right:1px solid #666666; height: 27px; line-height:27px;}
.menu ul li a {text-align:left; position:relative; top:10px; height:37px; line-height:37px; color:#ffffff; float:left; margin-top:-5px; padding:0 15px; font:normal 20px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { background:#000000;}
.menu ul li a.active { }
/* search */
.search { padding:0; margin:0 auto; width:200px; float:right; margin-top:5px;}
.search form { padding:0; margin:0 auto;}
.search span { display:block; float:left; background: url(images/search_bg.gif) left top no-repeat; width:146px; padding:0 5px;}
.search form .keywords { width:146px; line-height:13px; height:13px; float:left; background:none; border:0; padding:7px 0; margin:0; font:normal 15px Arial, Helvetica, sans-serif;}
.search form .button { float:left; margin:0; padding:0;}
/* body */
.body_resize {padding:0; margin:0 auto;}
.body { padding:0; margin:0 auto; border-bottom:1px solid #111;}
.body h2 { font:normal 18px Arial, Helvetica, sans-serif; padding:20px 5px; margin:0 0 10px 0;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; line-height:1.8em; padding:3px 5px; margin:0;}
.body p span { font: normal 11px Arial, Helvetica, sans-serif;}
.body a { color:#801e14; text-decoration:none;}
.right { width:680px; margin:0; padding:0 10px; float:right;}
.left { width:240px; margin:0; padding:0 10px; float:left;}
/*************footer**********/
.footer { padding:0; margin:0; border-top:1px solid #666666; background:#444444;}
.footer_resize { margin:0 auto; padding:10px 10px;}
.footer p { font:normal 15px Arial, Helvetica, sans-serif;}
.footer a { font:bold 15px Arial, Helvetica, sans-serif; text-decoration:none; padding:5px; margin:0;}
.footer p.right { text-align:right; width:350px; margin:0; padding:0; float:right;}
.footer p.leftt { text-align:left; width:550px; margin:0; padding:0; float:left;}
p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
附加檔案:
↓這個 User-Agent 用附加元件改成 IE8
順便加上系統版本
