[求助]使用CSS設定li標籤中的文字垂直置中該怎麼設定???

不知道有沒有發錯版,應該沒錯吧

本來還在考慮要發在哪個論壇,想一想01上的資訊前輩與高手應該超級多的,就厚著臉皮上來發問了。
先聲明這並非學校作業也非工作需求,純粹是每次改網頁時常常遇到這問題想解決所以上來發問看能不能找到方法,希望各位前輩們不要鞭那麼大力

之前寫網頁遇到這問題都是直接用表格下去直接解決,但這次的問題卡在我無法修改HTML源碼,所以一定得用CSS下去解決。

HTML源碼類似如下:
<div class="linkmenu">
 <ul id="linkmenu0">
  <li><a href="link1.html">link1</a></li>
  <li><a href="link2.html">link2link2 link2link2</a></li>
  <li><a href="link3.html">link3link3 link3link3 link3link3</a></li>
  <li><a href="link4.html">link4</a></li>
  <li><a href="link5.html">link5 link5</a></li>
 </ul>
</div>

目前的CSS源碼如下:
.linkmenu { font-size:14px; width:150px;}
#linkul { margin:0; list-style:none; }
#linkul li { width:150px; height:35px; border:#999999 1px solid; text-align:center; background:#CCCCCC;}
#linkul li a { color:#333333; text-decoration:none;}
#linkul li a:hover { color:#333333; text-decoration:underline;}


現在最大的問題就卡在不知道怎麼將li標籤中的連結文字垂直置中對齊

由於美工問題 li 的寬高昰固定的,造成某些連結文字太長會變為兩行,所以設定hight-light這招就行不通,如果直接設定padding-top也會讓兩行的文字往下擠壓超出 li 的框框(基本上文字最多兩行)

目前在firefox上沒問題,就是設定為
#linkul li a { color:#333333; text-decoration:none; width:150px; height:35px; display:table-cell; vertical-align:middle;}

但是IE卻一整個找不到解決方法,拜GOOGLE大神也一直無下文,找到的方法都必須修改HTML源碼才行的通,在昨晚失眠一個晚上後才決定上來發問,希望各位前輩高手們教教小弟了
2008-08-15 17:51 發佈
文章好像沉下去了

但好像已經自己找到解決方法了

#linkul li a { color:#333333; text-decoration:none; width:150px; height:35px; display:table-cell; vertical-align:middle;

/* IE 垂直置中 */
*height:auto !important;
*margin-top:17-this.clientHeight/2); }


感覺這方法似乎不太好,但沒辦法了~IE太難搞只好這樣用
卡米攝影誌 http://jiawei.twbbs.org/
雖然已經是夭壽久的文章,不過半夜遇到類似問題 打入關鍵字尋找還是找的到,所以就回文也做一個自己測試結果的紀錄

我遇到的問題很類似,不過差別是我要把 li 裡面的 a tag都置中對齊,因為有的li 裡面只有一個a 有的有兩個

  • aaa

    • aaabbbb


    • 所以我在我的css裡面除了設定li的高跟寬以外 a 的部份也要設定一個自己的高跟寬還有display:inline-block;
      我的寬設定跟 li 的寬一樣

      這樣就做出來了~
  • 內文搜尋
    X
    評分
    評分
    複製連結
    Mobile01提醒您
    您目前瀏覽的是行動版網頁
    是否切換到電腦版網頁呢?