CSS沮喪：如何集中LI標籤內不同寬度的浮動圖像？

我正在研究一個具有JavaScript圖像旋轉器的網頁，但它需要能夠處理不同大小的圖像。CSS沮喪：如何集中LI標籤內不同寬度的浮動圖像？

我用作底座的代碼有一個浮動LIs外的DIV，它包含圖像，但不管我嘗試了什麼，我似乎都無法讓圖像全部居中。唯一以中心爲單位的是全寬800px的。

我有一種感覺，這是浮動，位置或顯示，但我一直在搞亂了幾個小時，沒有運氣。

這裏是我的網站：

這裏就是我從借來的圖像旋轉代碼： http://www.serie3.info/s3slider/（代碼）http://www.serie3.info/s3slider/demonstration.html（演示）

感謝您的幫助，您可以提供！

來源

2010-08-19 Kane

這也適用（在Firefox和Safari中，還沒有試過IE）。另存爲.html作爲示例。

<!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"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <meta name="description" content="A picture and caption that you can change for everyone in the world to see."> 
    <meta name="keywords" content="pic and words, pic words, caption"> 
    <title>Pic and Words</title> 
    <link href="http://picandwords.be-better.net/styles.css" rel="stylesheet" type="text/css"> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://picandwords.be-better.net/s3Slider.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#slider1').s3Slider({ 
       timeOut: 4000 
      }); 
     }); 
    </script> 
    <style> 
     body, html 
     { 
      margin:0px; 
      width:100%; 
      height:100%; 
      padding:0px; 
     } 
     #slider1 
     { 
      text-align:center; 
      vertical-align:middle; 
      margin:0px; 
      padding:0px; 
      width:auto; 
      height:auto; 
     } 
     #slider1Content 
     { 
      text-align:center; 
      display:table; /* this is KEY to centering the UL */ 
      position:static; 
      margin:0px auto 0px auto; 
      padding:0px; 
      width:auto; 
      top:auto; 
     } 
     #pageWrapper 
     { 
      width:810px; 
      height:700px; 
      margin:0px auto 0px auto; 
      text-align:center; 
     } 
    </style> 
</head> 
<body> 
    <div id="pageWrapper"> 
     <h1>Pic and Words</h1> 
     <!--<a href="new_form.php">Upload</a> --> 
     <br /><br /> 
     <div id="slider1"> 
      <ul id="slider1Content"> 
       <li class="slider1Image"> 
        <div> 
         <img src="http://picandwords.be-better.net/uploaded_pics/1282179782-2zdr66e.jpg" 
         alt="Somewhere down Baja on the way to Cabo." 
         title="Somewhere down Baja on the way to Cabo." align="center" /> 
         <span class="bottom">"Somewhere down Baja on the way to Cabo."</span> 
        </div> 
       </li> 
       <li class="slider1Image"> 
        <div> 
         <img src="http://picandwords.be-better.net/uploaded_pics/1282180309-bicycle.jpg" 
         alt="Drunk dude on a bike" 
         title="Drunk dude on a bike" align="center" /> 
         <span class="bottom">"Drunk dude on a bike"</span> 
        </div> 
       </li> 
       <li class="slider1Image"> 
        <div> 
         <img src="http://picandwords.be-better.net/uploaded_pics/1282180338-captions03211.jpg" 
         alt="Do not want!" 
         title="Do not want!" align="center" /> 
         <span class="bottom">"Do not want!"</span> 
        </div> 
       </li>   
       <div class="clear slider1Image"></div> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

來源

2010-08-19 03:00:55

謝謝，這個作品完美！你搖滾。 – Kane 2010-08-20 16:17:11

很高興我能夠幫助！ – 2010-08-20 16:49:52

地址：

left: 0; 
padding: 0;

到#slider1Content風格。

然後從.slider1Image樣式中刪除float: left;。

請注意，源CSS在幾個維度上包含此警告：「重要的是與圖像寬度相同」。由於這個CSS沒有爲每個圖像調整大小，因此每張圖片都會有這個白色邊距。

如果您想動態重置這些關鍵維度（我認爲該網站看起來沒有這個問題），那麼這是一個單獨的問題，在此之前已經在這裏回答了。

來源

2010-08-19 02:51:13

謝謝，這確實是居中，雖然白色的邊緣有點煩人，所以我在下面布蘭登的版本。 – Kane 2010-08-20 16:17:41

CSS沮喪：如何集中LI標籤內不同寬度的浮動圖像？

回答

相關問題