IE7垂直和水平圖像居中

我試圖在固定的高度和寬度內垂直和水平居中對齊圖像。我的代碼在FF，Chrome，Safari和IE8 +中都能正常工作，但IE7並沒有在我的生活中找到解決辦法。IE7垂直和水平圖像居中

目前圖像可以是不同的高度和寬度，雖然如果我找不到一個很好的解決方案，我想我可以更嚴格的高度，並回落到經過驗證的測試中心技術。

活生生的例子是在jsfiddle

任何什麼好主意？

2011-12-20 DanC

因爲<img>元素display: inline;默認情況下，我們可以居中他們就像我們的文字：

a { 
    height: 180px; 
    width: 150px; 
    display: block; 
    text-align: center; 
    border: 1px solid black; 
    margin: 10px; 
    line-height: 180px; 
} 
a img { 
    vertical-align: middle; 
}

jsFiddle Demo

來源

2011-12-20 09:53:42

還沒有嘗試過，但似乎是buz-niz！乾杯! – DanC 2011-12-20 15:11:25

這已經治癒了我的IE7問題，但由於某種原因，它不適用於webkit瀏覽器！任何想法爲什麼？ – DanC 2011-12-22 12:35:02

它在Chrome 16中對我來說工作得很好。確保你的'line-height'和'height'是一樣的：http://jsfiddle.net/Daniel_Hug/63yaQ/1 – 2011-12-23 00:06:03

-1

我以前有過這個醜陋的問題，我解決它如下。這個想法是，但圖像使用CSS作爲背景圖像。我認爲/希望它在ie7中有效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
    <head> 
     <style type="text/css"> 
      #wm_splash{ 
       position: absolute; 
       top: 0; 
       left: 0; 
      } 

      #wm_splash_loading { 
       background-image: url('images/loading.gif'); /* the loading image (animated gif)*/ 
       height: 80px;          /* loading image height */ 
       width: 285px;          /* loading image width*/ 
       padding: 0px 0 0 0px; 
       text-align: center; 
      } 
     </style> 
     <title>Loading...</title> 
    </head> 

    <body> 

     <div id = "wm_splash" style = "width : 100% ; height : 100%"> 
      <table width = "100%" height = "100%" > 
       <tbody> 
        <tr> 
         <td width = "100%" height = "100%" align = "center" valign = "middle"> 
          <div id = "wm_splash_loading"> loading... </div> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </div>  
    </body> 
</html>

來源

2011-12-20 09:14:57 user983716

喜歡這個想法，但不是真的有可能要歸功於CMS我們使用在項目上 – DanC 2011-12-20 14:59:36

IE7垂直和水平圖像居中

回答

相關問題