MozTW 討論區 • 檢視主題 - [附圖]中英文混合時，文字垂直置中問題

所有顯示的時間為 UTC + 8 小時

[附圖]中英文混合時，文字垂直置中問題

第 1 頁 (共 1 頁)

[ 5 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

Ming Tsay

文章主題 : [附圖]中英文混合時，文字垂直置中問題

發表於 : 2010-08-03, 23:29

註冊時間: 2010-08-03, 22:58
文章: 1

目的：
讓網頁的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>

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;}

附加檔案:

檔案註釋: (圖片文字)
中文字和英文字明顯
沒有對齊，英文字比
中文字稍微偏下方了
一點兒，沒辦法對齊

.png [8.16 KiB]
被下載 2522 次

↓這個 User-Agent 用附加元件改成 IE8

順便加上系統版本

回頂端

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2)